在斜杠(/)上打破HTML文本的最佳方法是什么？

Question

我有一个360px宽的HTML表,效果很好.挑战在于http://this/is/a/really-really-really-really-really/long/url文本中有时会出现网址.这会导致表格水平展开,并在底部显示滚动条.

我认为overflow:hidden不会起作用,因为一半的文本会被隐藏.

什么是在CSS中强制破坏斜线(/)和短划线( - )的最佳方法(希望如此)？

它应该适用于IE7 +,Chrome,Firefox和Safari.

在Rails 3和jQuery中工作.

Answer 1

虽然css word-wrap: break-word;确实有效,但它的实现方式因浏览器而异.

如果您可以控制内容并想要确切的断点,则可以插入

• 一个<wbr>字休息(除了IE8所有主流浏览器都支持CanIUse.com);
• ​ 零宽度空间(U + 200B) - IE中的丑陋<= 6
• ­ 软连字符 - 虽然当然这会在断开时添加一个连字符,但并不总是如此.

我有一个庞大的企业用户群仍然需要使用IE8,所以当我遇到这个问题时,我someString.Replace("/", "/​")在服务器端代码中使用了C#.

问题:如果您在电子邮件地址中插入零宽度空间,当用户复制并粘贴到其电子邮件客户端时,空间也会被复制,电子邮件将失败,用户无法查看原因(空间为零)宽度...)

参考

• 堆栈溢出
• http://www.quirksmode.org/oddsandends/wbr.html - 举例说明

进一步阅读

• https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/(2012,2012)
• https://css-tricks.com/almanac/properties/w/word-break/(2012,2012)
• https://css-tricks.com/almanac/properties/h/hyphenate/(2011年 9月)

Answer 2

您可以这样使用word-wrap : break-word;:

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    word-wrap : break-word;
}

我测试了这个:IE 6 /7/8,Firefox 7,Opera 11,Safari 5,Chrome 15

这是一个jsfiddle:http://jsfiddle.net/p4SxG/

Answer 3

如果您不\xe2\x80\x99真正关心中断发生在哪里，最简单的方法是添加 style overflow-wrap: break-word;。这将允许长单词的断开而不影响其他单词的断开。

\n

但如果你想在特定字符处中断，例如斜杠字符，你可以\xe2\x80\x99t使用CSS来做到这一点，你必须在HTML中做到这一点。如果您有权访问 HTML 代码，您可以选择以下任一解决方案：

\n

\n
• <wbr>断词机会标签
\n
• ​零宽度空间
\n
• ​零宽度空间
\n

\n

但您并不总是能够访问 HTML 代码。某些 Web 应用程序不允许您在某些字段中输入代码；例如，WordPress 会过滤掉您在帖子标题中输入的任何代码。在这些情况下，您可以直接插入零宽度空格字符。执行此操作的一种方法是使用字符查看器(Mac) 或字符映射表(Windows)，尽管在涉及空格时它们使用起来有点棘手，因为空格是不可见的。在字符查看器的情况下，当您搜索arrow时，会出现大量匹配项，但是当您搜索零宽度 space时，似乎找不到任何字符。但是，如果您单击下面第二张图中蓝色方块的位置，您\xe2\x80\x99会发现该字符已找到，但\xe2\x80\x99只是不可见。

\n

\n

直接插入零宽度空格字符的另一种方法是从其他地方复制并粘贴一个字符。下面的两个哈希符号之间是一个零宽度空格字符。只需复制哈希符号，将它们粘贴到需要零宽度空间的位置，然后小心删除符号，不要删除它们之间的不可见字符。

\n

#\xe2\x80\x8b#

\n

演示这些不同方法都有效的片段：

\n

\r\n

\r\n

h1 {\n  width: 15rem;\n  border: 1px solid black;\n}\n.b {\n  overflow-wrap: break-word;\n}

\r\n

A title which is too long\n<h1>Seminars/Workshops</h1>\nBreaking with CSS\n<h1 class="b">Seminars/Workshops</h1>\nBreaking with HTML: code-based solutions\n<h1>Seminars<wbr>/<wbr>Workshops</h1>\n<h1>Seminars&#8203;/&#8203;Workshops</h1>\n<h1>Seminars&ZeroWidthSpace;/&ZeroWidthSpace;Workshops</h1>\nBreaking with HTML: character-based solution (zero width space characters have been inserted directly both before and after the slash)\n<h1>Seminars\xe2\x80\x8b/\xe2\x80\x8bWorkshops</h1>

\r\n

\r\n

\r\n

\n

这是一个处理链接并在每个斜杠之前自动添加零宽度空格的脚本，除了初始的斜杠之外://

\n

\r\n

\r\n

document.querySelectorAll(\'.breakify\').forEach(e => {\n  e.innerHTML = e.innerHTML.replaceAll(/(?<=[^:\\/])\\//g, \'&ZeroWidthSpace;/\')\n})

\r\n

p {\n  max-width: 30em;\n}

\r\n

<p>Here is a really long link <a href="https://google.com">http://this/is/a/really/really/really/really/really/really/really/really/really/really/really/really/really/really/really/really/long/url</a> which does not break on the slashes.</p>\n\n<p>Here is a really long link <a class="breakify" href="https://google.com">http://this/is/a/really/really/really/really/really/really/really/really/really/really/really/really/really/really/really/really/long/url</a> which now that we have added the breakify class to it, will break on the slashes.</p>

\r\n

\r\n

\r\n

\n