如何在HTML中打破長字符串？

Break long word with CSS

而且我現在有：

<span style="font-size: xx-small; white-space: -moz-pre-wrap !important; white-space: -pre-wrap;white-space: 
-o-pre-wrap;white-space: pre-wrap; word-wrap: break-word;word-break: break-all;white-space:normal;width: 385px;">

，但仍是大串不會自動換行的FF或者IE瀏覽器，但它確實在Chrome ...

（例如：http://ed.je/2L6或http://jsfiddle.net/92kSU/）

來源

2014-03-27 edelwater

請共享的jsfiddle – TylerH

添加的jsfiddle也 – edelwater

將你想要什麼樣的字符串的突破和哪些原則？例如，你是否希望正常的詞語在肋骨點上？（提供許多「解決方案」來抽象這樣的問題。） –

在這種情況下，您需要在更高級別設置word-break: break-all。如果我在Firefox中打開示例頁面並使用Firebug在.entry-content上設置樣式word-break: break-all，則大字符串會自動換行。

編輯：

或者，你可以改爲設置顯示樣式，你跨越爲inline-block的。

來源

2014-03-27 17:40:02 dgvid

在添加我的答案之前沒有看到您的編輯。 Upvote給你。 –

tnx。慢慢更新新的style.css。可能最好將其設置爲style.css級別而不是後級別。 – edelwater

下面的代碼片斷是一個包羅了所有的文字環繞：

.class_name { 
    -ms-word-break: break-all; 
    word-break: break-all; 

    /* Non standard for webkit */ 
    word-break: break-word; 

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto; 
}

word-break: break-all將除了IE8和Firefox的工作，所以你需要ms-word-break前綴線包括在內。像往常一樣，IE8要求先添加前綴行。但是，這並不能解決Firefox的問題。

在FF，你需要使用一個名爲hyphenations新項目，它除了支持Chrome瀏覽器（但也沒關係，因爲Chrome瀏覽器將使用基本word-break: break all）在這個漫長的列表：-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;。

Hyphenation會在正確的位置插入連字符以獲得分詞符，這是一種比僅僅分割兩個詞更好的解決方案。

More information on why this is a catch all.

來源

2014-03-27 17:41:55 TylerH

Downvoter請評論;這實際上是一個全方位的封裝，當應用到OP的代碼將打破長字符串。 – TylerH

tnx也可以工作。給你一個upvote，以匹配誰downvoted – edelwater

如何在HTML中打破長字符串？

回答

相關問題