Question

有人可以帮助我解决这个问题，我有一个div结构，如：它有长字符串，以确保它不会破坏CSS但使用此代码它是... 我尝试使用带有自动换行和PHP wordwrap（）函数的PRE ...所有这些都给了我相同的重叠输出...我想要打破这么长的字符串，使它适合我的div并且所有的div都是均匀放置的...

css如下：。加载 {保证金左：40像素;宽度：300像素;高度：30PX;字体大小：12像素; border-bottom：solid 1px #FFFFFF;} ............... HTML ...................

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

ssssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss 时间：

        </span></div>

dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddd 时间：

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

无法附加屏幕截图....但是输出重叠了DIV ...而且没有或没有文字的Div就可以了..

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

Answer 2

很难打破reaaaaaaaaaaaaaaaaaaaaaaaly的一句话，你只能包装实际的句子。

另外你应该设置div的样式来隐藏溢出，这就是我一直在做的事情，以防止你的模板出现故障：

div{ overflow:hidden; }

其他可能的值是：

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

CSS换行符，Web设计，Word Wrap，Css中断

2 个答案: