CSS换行符、网页设计、换行、Css换行符

Question

有人可以帮助我这个问题的css，我有一个div结构像:它与长字符串，以确保它不会破坏CSS，但与此代码它是…我试着使用带有wordwrap和PHP wordwrap()的PRE，它们的function...all给了我相同的重叠输出……我只想打断这么长的字符串，这样它就可以放在我的div中，并且所有的div都均匀地放置……

css为：.load {margin left:40px；width:300px；height:30px；font-size:12px；border bottom:solid 1px #FFFFFF;} ...............HTML...................

<div class="load" id="load">
        <span>
            dddddddddddddddddsssssssssssssssssssssss<br />

ssssssssssssssssssssssssssssssssssssssss

ssssssssssssssssssssssss时间：

        </span></div>   

                             dddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddd

ddddddddddddddddd时间：

............many这样的div

无法附加screenshot....but。输出与DIV重叠...没有文本或文本较少的DIV和DIV可以。

Answer 1

您可以尝试使用word-wrap属性，如以下演示所示：

http://jsfiddle.net/audetwebdesign/pTH6Y/

只有当应用于固定宽度的块级元素时，自动换行才有效，在我的示例中使用类exactFit的div。

word-wrap是一个CSS3属性，因此请仔细检查它是否存在跨浏览器问题，您可能需要使用特定于供应商的前缀来使样式在更多浏览器中正常工作。

还有另一种依赖于white-space属性的方法：

white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */

在这里，您真正想要做的是找到一种可以在所有流行平台上工作的方法。

参考： http://perishablepress.com/press/2010/06/01/wrapping-content/

Answer 2

很难打破一个很长的单词，你只能包装实际的句子。

另外，你应该将div的样式设置为隐藏溢出，这就是我一直在做的，以防止你的模板出错：

div{ overflow:hidden; }

其他可能的值包括：

oveflow-y:hidden;
oveflow-x:hidden;
// auto -- scrolls when overflowwing
// scroll -- scroll bar always visible