CSS断词首先使用符号答案

【问题标题】：CSS break-word using symbols firstCSS断词首先使用符号
【发布时间】：2017-01-11 18:07:43
【问题描述】：

在某些情况下，我不觉得word-wrap: break-word; 规则在眼睛里太令人愉快，因为在正确的条件下，它往往会在错误的地方断开长字符串。

它会产生这样的东西：

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

而不是

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

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

【问题讨论】：

【解决方案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。

另一种突破位置的方法是使用连字符 (&shy;)

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

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

但使用连字符的缺点是它会在断词处插入一个可见的连字符。

你也可以看看here一个非常相似且更详细的答案。

【讨论】：

我真的很喜欢<wbr> 方法，但在我的情况下，所有文本都是动态的并且来自数据库。 <wbr> 需要我马上知道该放在哪里。我想我能做的就是将<wbr> 附加到所有符号。

【解决方案2】：

尝试添加这个。 word-break: keep-all;

【讨论】：