Css分词-先使用符号

问题描述

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

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

|--- 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>