首先使用符号的CSS break-word

Question

在某些情况下，我没有发现word-wrap: break-word;规则太令人愉快，因为在适当的条件下，它往往会在错误的地方打破长串。

它产生这样的东西：

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

而不是

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

我有没有办法微调我的CSS规则，以便在破坏实际单词之前先尝试通过符号来破坏单词？如果是这样，我该怎么做？

Answer 1

我认为实现此类行为的唯一方法是在您希望导致单词分隔的位置使用<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。

Answer 2

尝试添加此功能。 word-break：keep-all;