使用CSS对特定单词使用断词功能

Question

我试图使用css拆分一个特定的单词。

这个单词是“sales/telemarketing”，我想在“/tele”部分之后拆分这个单词。 我尝试避免使用<br>, 因为它可能会影响段落标记的布局。

是否有一种使用CSS拆分它的方法？

- marchemike

Answer 1

我知道你说要避免使用<br>，但是可以使用<wbr>。

jsfiddle示例

使用示例：

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

如果你调整p的大小，则在tele后面单词将被分割。

参见MDN

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

---

我刚想到了一个随机的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 ，你可以删除空格。虽然不是最理想的方法，但仍然有效。

- Josh Crozier

---

尝试使用<wbr>，但是在查看了它之后，我使用了另一种替代方法​。 - marchemike

<wbr>被广泛支持，特别是如果您将wbr:after { content: "\200B"; }添加到样式表中。但它不适用于指定一个单词可以分成两行，因为它会在不添加连字符的情况下断开。而使用​（它实际上是字符级对应物）也有同样的问题。 - Jukka K. Korpela

@JukkaK.Korpela 我一直在等你发表一些负面的评论 - 谢谢你又给我点了一个踩 :) - Josh Crozier

@JukkaK.Korpela 你完全 错误 地声称 wbr 得到广泛支持 - 它甚至在 IE10 中都不起作用!! - Josh Crozier

我之所以给出反对票，是因为答案可以被证明是错误的，而且甚至没有回答问题（如何在“/tele”部分之后进行除法）。关于IE 10，只需尝试使用我提到的CSS添加即可。 - Jukka K. Korpela

Answer 2

CSS 中无法指定单词分割点（除非采用一种牵强的方式，这只是对正确方式的不可靠模拟）。相反，应包含一个连字提示，即软连字 U+00AD，可以直接输入该字符（如果您知道如何输入），或使用引用 ­。

sales/tele­marketing

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

- Jukka K. Korpela