Css分词-先使用符号

我认为word-wrap: break-word;规则在某些情况下不太令人愉快，因为在给定正确的条件下，它往往会在错误的位置打断长弦。

它会产生如下所示的结果：

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

而不是

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

有没有办法让我微调一下我的css规则，让它先尝试用符号隔开单词，然后再拆分实际的单词？如果是，我该如何做？

---

解决方案

我认为实现此行为的唯一方法是在您的标记中希望导致断字的位置使用<wbr>(mdn link)。

看一看：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

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

也很好supported。

在某个位置中断的另一种方法是使用害羞连字符(­)

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

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

但使用害羞连字符的缺点是它会在分隔符的位置插入一个可见的连字符。

您还可以查看非常相似且更详细的答案here。