恐怕没有比将文本拆分为“单词”(由空格分隔的非空格字符序列)并将每个包含连字符的“单词” Package 在nobr标记中更可靠的方法了。因此,像bla bla foo-bar bla bla这样的输入数据将被转换为bla bla <nobr>foo-bar</nobr> bla bla。 您甚至可以考虑在“单词”包含字母和数字以外的任何内容时插入nobr标记。原因是一些浏览器甚至可能会中断字符串,如“2/3”或“f(0)”(参见我的oddities of line breaking in browsers页面)。
7条答案
按热度按时间7z5jn7bk1#
您可以使用
‑
,它是Unicode非中断连字符(U+2011)。HTML:
‑
或‑
另见:http://en.wikipedia.org/wiki/Hyphen#In_computing
roqulrg32#
一种解决方案是使用额外的
span
标记和white-space
CSS属性。像这样定义一个类:然后用这个类在连字符的文本周围添加一个span。
这种方法应该在所有浏览器中都能正常工作-这里列出的错误实现是针对
white-space
属性的其他值:http://reference.sitepoint.com/css/white-space#compatibilitysectionk2fxgqgv3#
恐怕没有比将文本拆分为“单词”(由空格分隔的非空格字符序列)并将每个包含连字符的“单词” Package 在
nobr
标记中更可靠的方法了。因此,像bla bla foo-bar bla bla
这样的输入数据将被转换为bla bla <nobr>foo-bar</nobr> bla bla
。您甚至可以考虑在“单词”包含字母和数字以外的任何内容时插入
nobr
标记。原因是一些浏览器甚至可能会中断字符串,如“2/3”或“f(0)”(参见我的oddities of line breaking in browsers页面)。ztyzrc3y4#
如果不编辑每个HTML示例,则无法执行此操作。因此,我写了一些JavaScript代码来替换它们:
jQuery:
Vanilla JavaScript:
wgx48brx5#
在连字符周围使用 word joiner 字符(
⁠
)。它也可以在Internet Explorer中运行。修复特定连字符...
或者一切...
hiz5n14c6#
试试这个CSS:
c0vxltue7#
您可以使用CSS line-break属性:
尽管文档中说它只适用于中文、日文和韩文(CJK)语言,但它也禁用了英语文本中连字符的换行符。我在Firefox(Win10),Chrome(Win10),Edge(Win10)和Safari(OSX)中进行了测试,它非常适合持有长授权密钥的文本区域。替换表单域中的连字符需要在每次提交表单时替换它们,因此不是理想的选择。