CSS line break，Web design，Wordwrap，Css break

有人可以帮助我解决这个问题的CSS，我有一个div结构，如：它与长字符串，以确保它没有违反CSS，但与此代码是... 我尝试使用PRE与单词包装和PHP wordwrap（）函数...所有这些给我相同的重叠输出...我想只是打破这么长的字符串，使它适合我的div和所有divs均匀放置...CSS line break，Web design，Wordwrap，Css break

该CSS为： .load {margin-left：40px;宽度：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其中没有或更少的文字都可以。

来源

2011-02-05 Manish Maheshwari

-1

它有点难以打破一个词reaaaaaaaaaaaaaaaaaaaaaaaaa长，你只能包装实际的句子。

你也应该设置div来隐藏溢出的风格，这就是我一直做，以防止你的模板毛刺：

div{ overflow:hidden; }

其他可能的值是：

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

来源

2011-02-05 08:51:13

你可能尝试使用word-wrap财产表现在以下演示：

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

仅在应用于固定宽度的块级元素时，Word-wrap才有效，在我的示例中，类为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/

来源

2011-03-07 19:09:35

以供将来参考：CSS 3。0 [提出`overflow-wrap`来代替`word-wrap`]（http://www.w3.org/TR/css3-text/#overflow-wrap）。尽管Chrome仍然使用“自动换行”。 – Arjan 2012-03-04 14:51:55

CSS line break，Web design，Wordwrap，Css break

回答

相关问题