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

回答

相關問題