我试图使用css拆分一个特定的单词。
这个单词是“sales/telemarketing”,我想在“/tele”部分之后拆分这个单词。 我尝试避免使用<br>
, 因为它可能会影响段落标记的布局。
是否有一种使用CSS拆分它的方法?
我试图使用css拆分一个特定的单词。
这个单词是“sales/telemarketing”,我想在“/tele”部分之后拆分这个单词。 我尝试避免使用<br>
, 因为它可能会影响段落标记的布局。
是否有一种使用CSS拆分它的方法?
我知道你说要避免使用<br>
,但是可以使用<wbr>
。
使用示例:
<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>
p
的大小,则在tele后面单词将被分割。可悲的是,由于IE10不支持,因此对于<wbr>
的支持有限。
我刚想到了一个随机的CSS替代方案..
HTML
<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>
CSS
span {
margin-right:-4px;
}
基本上,你只需在 tele 后面加一个空格,就会自动换行。通过选择单词 tele ,你可以删除空格。虽然不是最理想的方法,但仍然有效。
CSS 中无法指定单词分割点(除非采用一种牵强的方式,这只是对正确方式的不可靠模拟)。相反,应包含一个连字提示,即软连字 U+00AD,可以直接输入该字符(如果您知道如何输入),或使用引用 ­
。
sales/tele­marketing
如果您愿意,可以向同一个单词添加其他连字提示。并且您可以在 /
后面添加 <wbr>
来指定允许的直接断点(如果字符串被分割,则不会出现连字符)。
<wbr>
,但是在查看了它之后,我使用了另一种替代方法​
。 - marchemikewbr:after { content: "\200B"; }
添加到样式表中。但它不适用于指定一个单词可以分成两行,因为它会在不添加连字符的情况下断开。而使用​
(它实际上是字符级对应物)也有同样的问题。 - Jukka K. Korpelawbr
得到广泛支持 - 它甚至在 IE10 中都不起作用!! - Josh Crozier