使用CSS在特定单词上使用Word Break

Question

我正在尝试使用css打破一个特定的单词。

这个词是“销售/电话营销”，我试图在“/ tele”部分之后打破这个词。我试图避免使用<br>，因为它可能会影响段落标记的布局方式。

有没有办法用CSS打破它？

Answer 1

我知道你说你想避免<br>，但有<wbr> ..

jsfiddle demo

使用示例：

<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>

如果您重新调整p的大小， tele 后该单词将会中断。

See MDN

可悲的是，对<wbr>的支持有限，因为IE10不支持。

---

我只想到了一个随机的CSS替代品。

jsFiddle demo

<强> HTML

<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>

<强> CSS

span {
    margin-right:-4px;
}

基本上，你只需要在 tele 之后加一个空格，因此它会突破到一个新行。通过选择单词 tele ，你可以删除空格.. not not理想 - 但它仍然有效。

Answer 2

你不能在CSS中指定一个单词分割点（除了以一种人为的方式，这只是对正确方法的不可靠模拟）。相反，如果您知道如何使用或使用引用­，请包含连字符提示，软连字符U + 00AD，或者使用引用sales/tele­marketing ：

<wbr>

如果您愿意，可以在同一个单词中添加其他连字提示。您可以在/之后添加{{1}}以指定允许的直接断点（如果字符串被分割，则不会出现连字符。）