HTML垂直滚动长文本

Question

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

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

Answer 1

<pre>标签默认不包装文本！您应该采用如下方案：

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

<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>

Answer 2

溢出：自动样式会导致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>