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