如何顯示帶有自動換行符的長字符串，網(wǎng)站地址，單詞或符號集，以保持div寬度？我猜是一個自動換行。通常添加空格是可行的，但是是否有CSS解決方案，例如自動換行？例如，它（非常討厭）與div重疊，強(qiáng)制水平滾動等。我可以在上面的字符串中添加什么以使其完全適合div中的幾行或?yàn)g覽器窗口？
3 回答
互換的青春
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個贊
在此之前已經(jīng)問過這個問題：
誰解決了我的div-break-breaks-my-div問題？（提示：不是stackoverflow）
CSS / JS中的自動換行
CSS：如何強(qiáng)制將長字符串（沒有任何空格）包裹在XUL和/或HTML中
帶有長網(wǎng)址的CSS溢出
長話短說：
就CSS解決方案而言，您必須：overflow: scroll;強(qiáng)制元素顯示滾動條，并overflow:hidden;僅剪切掉任何多余的文本。有text-overflow:ellipsis;和word-wrap: break-word;但它們僅是IE（break-word但是，在CSS3草案中，因此從現(xiàn)在起這將是這5年的解決方案）。
底線是，如果將文字換行到下一行來阻止這種情況的發(fā)生對您來說非常重要，則唯一合理的解決方案是注入 ­（軟連字符），<wbr>（斷字標(biāo)記）或​（零寬度空格，與­減號（連字符）相同）。但是，如果您不介意Javascript，則可以使用連字符。
largeQ
TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個贊
word-wrap: break-word;可在IE7 +，F(xiàn)F 3.5和啟用Webkit的瀏覽器（Safari / Chrome等）中使用。要處理IE6，您還需要聲明word-wrap: break-all;
如果瀏覽器列表中沒有FF 2.0，則使用這些解決方案是可行的。不幸的是，它沒有在單詞斷行的前面加上連字符，這是印刷的噩夢。我建議使用Paolo所建議的Hyphenator，這是不引人注目的JavaScript。因此，未啟用JavaScript的用戶的后備狀態(tài)將是斷字，不帶連字符。我暫時可以忍受。在CMS中，Web設(shè)計人員無法控制要輸入的內(nèi)容，或者在哪里可以實(shí)現(xiàn)換行符和軟連字符的地方，很可能會出現(xiàn)此問題。
我看了W3規(guī)范，其中討論了CSS3中的連字。不幸的是，似乎有一些建議，但還沒有具體的建議?？磥頌g覽器供應(yīng)商還沒有實(shí)現(xiàn)任何東西。我已經(jīng)檢查了Mozilla和Webkit的專有代碼，但是沒有任何跡象。
繁星點(diǎn)點(diǎn)滴滴
TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個贊
剛才在這里提到過，但可能與這個問題更相關(guān)。最好的屬性很快就會被溢出包裝。如果實(shí)現(xiàn)，那么最好的價值是：
* {
overflow-wrap:hyphenate.
}
在iPhone或Firefox上書寫時，似乎還沒有得到任何支持，而且溢出包裝：連字符甚至不在工作草案中。
在此期間，我將使用：
p {
word-wrap: break-word;
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
添加回答
舉報
0/150
提交
取消