Question

<pre id="${item.id}"> <div style="overflow:auto; width:750px; max-height:150px;">${item.template[item.prop2]}</div></pre>

我在div中有大量内容，但它会水平滚动。我希望文本在宽度为750像素后中断，并从仅使用垂直滚动的下一行开始。

Answer 1

溢出：自动样式会导致x和y轴都滚动。您可以使用overflow-y：auto。这将仅允许在y轴上滚动或垂直滚动。

<pre id="${item.id}"> <div style="overflow-y:auto; width:750px; max-height:150px;">${item.template[item.prop2]}</div></pre>

Answer 2

<pre>标记默认情况下不会换行文字！您应该使用以下解决方案：

＆＃13;

pre#test {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
}

＆＃13;

<pre id="test">
  <div style="width:750px;max-height:75px;overflow:auto;word-wrap: break-word;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</pre>

＆＃13;

HTML垂直滚动长文本

2 个答案: