Css分词-先使用符号 [英] CSS break-word using symbols first

问题描述

我认为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。

这篇关于Css分词-先使用符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！