CSS 先用符号断词

Question

我觉得 word-wrap: break-word; 规则在某些情况下看起来不太舒服，因为在正确的条件下，它往往会在错误的地方断开长字符串。

它产生这样的东西：

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

而不是

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

我有没有办法微调我的 CSS 规则，以便它尝试先通过符号来打破单词，然后再打破实际的单词？如果可以，我该怎么做？

Answer 1

尝试添加这个。断字：保留所有；

Answer 2

我认为实现这种行为的唯一方法是在标记中您希望导致单词中断的位置使用 <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。

CSS break-word using symbols first