css - 使用 CSS 对特定单词使用分词

Question

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

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

有没有办法使用 CSS 来打破它？

Answer 1

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

jsfiddle 演示

示例用法：

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

如果重新调整大小p，则单词会在tele之后中断。

见 MDN

遗憾的是，对 的支持有限<wbr>，因为 IE10 不支持它。

---

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

jsFiddle 演示

HTML

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

CSS

span {
    margin-right:-4px;
}

基本上，您只需在tele之后包含一个空格，因此它会换行。通过选择单词tele，您可以删除空格.. 不理想 - 但它仍然有效。

Answer 2

您不能在 CSS 中指定分词点（除非以人为的方式，这只是对正确方式的不可靠模拟）。相反，包括一个连字符提示，即软连字符 U+00AD，如果您知道如何直接输入，或者使用参考­：

sales/tele­marketing

如果您愿意，可以为同一个单词添加其他连字提示。并且您可以添加<wbr>after/以指定允许的直接断点（如果字符串被分割，则不会出现连字符）。