CSS 换行符、网页设计、自动换行、CSS 换行符答案

【问题标题】：CSS line break, Web design, Wordwrap, Css breaksCSS 换行符、网页设计、自动换行、CSS 换行符
【发布时间】：2011-06-21 19:31:57
【问题描述】：

有人可以帮我解决这个 css 问题吗，我有一个 div 结构，例如：它带有长字符串，以确保它不会破坏 CSS，但是使用这段代码它是...... 我尝试将 PRE 与自动换行和 PHP wordwrap() 函数一起使用……它们都给了我相同的重叠输出……我只想打破这么长的字符串，使其适合我的 div 并且所有 div 都均匀放置...

css 如下：。加载 {margin-left:40px;宽度：300 像素；高度：30px；字体大小：12px；边框底部：实心 1px #FFFFFF;} ....HTML.......

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

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 时间：

        </span></div>

dddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddd 时间：

............很多这样的div

无法附上屏幕截图....但输出与 DIV 重叠...并且没有或更少文本的 Div 都可以..

【问题讨论】：

标签： php css word-wrap

【解决方案1】：

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

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

自动换行仅适用于固定宽度的块级元素，在我的示例中为 div，类为exactFit。

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/

【讨论】：

供将来参考：CSS 3.0 proposes overflow-wrap to replace word-wrap。 Chrome 仍然使用word-wrap。

【解决方案2】：

一个很长的单词很难打断，你只能换行。

您还应该设置 div 的样式以隐藏溢出，这就是我一直在做的以防止您的模板出现故障：

div{ overflow:hidden; }

其他可能的值是：

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

【讨论】：