首先使用符號的CSS分詞

在某些情況下，我並沒有發現word-wrap: break-word;規則在眼睛中過於愉快，因爲它在給定正確條件的情況下往往會在錯誤的地方打破長串。首先使用符號的CSS分詞

它生產的是這樣的：

|--- DIV ---| 
|   | 
| English/S | 
| panish | 
|   | 
|-----------|

代替

|--- DIV ---| 
|   | 
| English/ | 
| Spanish | 
|   | 
|-----------|

有我微調我的CSS規則，它試圖通過符號之前先斷詞的方式打破實際的話？如果是這樣，我該怎麼做？

我認爲實現這種行爲的唯一方法是在標記中使用<wbr>（mdn link）在希望導致分詞的位置。

看一看：

.word-box{ 
 
    width:100px; 
 
    margin:5em; 
 
    border:1px solid #606266; 
 
}

<div id='break-wbr' class='word-box'> 
 
English/<wbr>Spanish 
 
</div>

這也是很好supported。

的另一種方法的位置處斷裂。將通過使用害羞連字符（）

.word-box{ 
 
    width:100px; 
 
    margin:5em; 
 
    border:1px solid #606266; 
 
}

<div id='break-shy' class='word-box' lang='en'> 
 
English/&shy;Spanish 
 
</div>

但使用害羞連字符的缺點是，它在點插入一個可見連字符的文字休息。

你也可以看看一個非常相似和更詳細的答案here。

2017-01-11 19:39:40 slumbergeist

我真的很喜歡''方法，但在我的情況下，所有文本都是動態的，都來自數據庫。 ''需要我知道在哪裏放它。我想我能做的只是追加所有符號''。 –

嘗試添加。 word-break：keep-all;

2017-01-11 18:10:33 jmag

沒有工作：https：//jsfiddle.net/pcqqcdbf/ –

也許是因爲英語/西班牙語被認爲是一個詞。嘗試英文/西班牙文。與/之後的空間。 – jmag

我不認爲這是我的選擇。 –

回答