就像标题所说的那样，我的页面溢出了很长的字符串。我尝试了一些溢出技术，但似乎都没有。
我之前将此作为Primefaces问题发布，但后来才知道它不是Primefaces问题。无论如何，如果有人对如何解决这个问题有任何建议，我将不胜感激。我将在下面发布我的HTML，以便您可以看到我在说什么。
感谢您花时间阅读，并度过了美好的一天。 ： - ）
<!DOCTYPE html>
<html>
<head>
<title> overflow </title>
<style type="text/css">
#container{
width: 800px;
border: 1px solid #000;
background-color: #efefef;
}
div {
padding: 10px;
}
span.text {
}
</style>
</head>
<body>
<h3> overflow </h3>
<div id="container">
<table border="1">
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
</table>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper justo vel felis blandit ut egestas nisi tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in est pulvinar orci pharetra fringilla in eget quam. Maecenas id ipsum eget arcu tempus varius eu sit amet neque. Praesent quis consectetur ligula. Nam bibendum, turpis nec dignissim euismod, arcu libero sodales sapien, ut scelerisque magna risus eu orci. Curabitur sit amet turpis at turpis adipiscing luctus nec id felis. Vestibulum luctus mauris quis ante dignissim rutrum. Fusce fermentum enim quis nisl volutpat consequat. Integer lacinia tempor nisi id aliquet. Praesent vitae semper ipsum. Curabitur mauris est, faucibus eu auctor a, egestas vitae nisi.
</div>
<div>
Donec fringilla laoreet leo, eu aliquet dolor mollis sed. Donec ligula turpis, vestibulum sed faucibus at, venenatis consequat turpis. Integer fringilla, ligula in consequat sodales, odio nunc vulputate nisi, non hendrerit dolor mauris sodales nulla. Nulla mattis iaculis nisi, quis lacinia massa dictum vitae. Fusce quis turpis neque, nec adipiscing tortor. Cras et nisi sem, at viverra lacus. Nam posuere odio non lacus facilisis condimentum. Ut ultricies, arcu eget tempus facilisis, urna dui commodo neque, a posuere libero mi ut nisl. Praesent ut semper lectus. Aenean id mauris nulla. Pellentesque dapibus congue varius. Ut id turpis consequat augue pellentesque egestas. Nunc feugiat bibendum tortor, sit amet fringilla enim viverra in. Mauris sit amet lorem eget enim ultrices euismod id eu velit. Duis eu vestibulum sapien.
</div>
<div>
Vivamus volutpat interdum tortor et luctus. Etiam laoreet congue nunc in congue. Nullam interdum mauris eros. Duis at turpis odio, in interdum odio. Aenean feugiat est at libero hendrerit quis laoreet purus egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sagittis scelerisque venenatis. Morbi tristique rutrum tortor at lobortis. Suspendisse suscipit purus vel massa laoreet vitae dapibus lorem imperdiet. Mauris consectetur arcu et diam iaculis et cursus leo ultrices. Nunc turpis nunc, interdum ac pretium id, facilisis quis libero.
</div>
<div>
Donec eget velit in nisl posuere porttitor ut at nisl. Phasellus eros tortor, pretium at sollicitudin pellentesque, feugiat a tortor. Integer blandit viverra odio, id iaculis odio fringilla ac. Nulla dignissim fermentum lorem ac scelerisque. Vivamus iaculis augue eu sapien porta convallis. Nam faucibus, diam nec condimentum dapibus, erat arcu vehicula nisi, sed vehicula ante ante convallis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam elit, mattis pretium venenatis nec, vehicula ut tellus. Phasellus commodo pretium purus, non viverra erat auctor sed. Ut dui nisl, pellentesque nec placerat non, sagittis condimentum nunc. Donec varius tincidunt est eu consequat. Etiam ac nulla ut nibh sagittis vulputate. Nullam egestas risus eu nunc tincidunt a ultricies libero posuere. Nulla facilisi. Maecenas sagittis est nec tellus sodales porttitor.
</div>
<div>
Nullam vulputate dui ac velit lobortis pellentesque eu a nisi. Maecenas vitae ligula dui, in imperdiet mi. Mauris commodo nisl eu eros sodales sed tempor leo auctor. Nam ornare varius arcu, at dictum ipsum volutpat nec. Aenean sagittis adipiscing hendrerit. Aenean at quam lacus. Donec malesuada bibendum vestibulum. Suspendisse lobortis pretium neque, vitae tempus felis interdum in. Aliquam sed metus in felis sodales interdum. Praesent malesuada nulla pretium arcu consectetur eu dictum lacus elementum. Ut dictum faucibus hendrerit.
</div>
</body>
</html>
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<title> problem </title>
<style type="text/css">
.main
{
width:960px;
margin:0 auto;
overflow: scroll;
}
</style>
</head>
<body>
<h4> problem </h4>
<div class="main">
<table border="1">
<tr>
<td>
<span>cell</span>
</td>
<td>
<span> </span>
</td>
<td>
<span>cell</span>
</td>
<td>
<span class="troubleSpan">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 1 :(得分：0)
使用自动换行：break word css attribute＆amp;给它一个明确的宽度：
span .text{
word-wrap:break-word;
width:800px;
}
仅当元素具有可视化渲染，具有显式高度/宽度的内联元素，绝对定位和/或是块元素时，此属性才适用。