javascript - 如何使用向上滚动和向下滚动的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;
}