如何使用javascript向上和向下滚动将文本包装在特定的宽度和高度内

Question

我在javascript中非常陌生，我正在用它来创建一个交互式网站，但是存在问题。 因为我刚开始，所以我只知道如何对我的内容进行warpText，而且我不知道如何在javascript中编写一个具有如果wrapText在给定的宽度和高度中溢出的功能的代码。 将会出现向上和向下滚动，并帮助浏览那些没有被看到的页面。

这就是我用的：

function wrapText(text, x, y, maxWidth, lineHeight)
{
  var words = text.split('');
  var line = '';
  for(var n = 0; n < words.length; n++)
  {
    var testLine = line + words[n] + '';
    var metrics = content.measureText(testLine);
    var testWidth = metrics.width;
    if(testWidth > maxWidth)
    {
      context.fillText(line, x, y);
      line = words[n] + '';y += lineHeight;
    }
    else {
           line = textLine;
         }
   }
context.fillText(line, x, y);
}

在函数绘制中：

wrapText(currentText, 45, 460, 800, 20);

Answer 1

这是我的jsFiddle解决方案 。 我认为您的解决方案只需要纯HTML / CSS：

HTML：

<div id="foo" class="wrap">...</div>

还有你的CSS：

#foo {
    width: 400px;
    height: 300px;
    background-color: yellowgreen;
}

.wrap {
    overflow-y: auto;
}