始终不可见的可选换行 HTML 实体
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15841109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Optional line-breaking HTML entity that is always invisible
提问by David J.
I want an optional line-breaking character that is always invisible that works with the word-wrap: break-word;CSS style.
我想要一个可选的换行符,它总是不可见的,可以与word-wrap: break-word;CSS 样式一起使用。
Here are some specifics. My goal is to break apart long links in reasonable places. These characters are a good place to start: -, ., _, /, \. This is not a Rails-specific question, but I wanted to share some code I'm using now:
以下是一些具体情况。我的目标是在合理的地方分解长链接。这些字符是一个很好的起点:-, ., _, /, \。这不是特定于 Rails 的问题,但我想分享一些我现在正在使用的代码:
module ApplicationHelper
def with_optional_line_breaks(text)
text.gsub(%r{([-._/\])}, '­')
end
end
Here's the problem with the code above: when ­takes effect (in a table with: word-wrap: break-word;), ­gets displayed as -. I don't want to see the -; I want a line break without any character shown.
这是上面代码的问题:当­生效时(在带有 : 的表中word-wrap: break-word;),­显示为-. 我不想看到-; 我想要一个不显示任何字符的换行符。
回答by David J.
​is the HTML entity for a unicode character called the zero-width space (ZWSP).
​是称为零宽度空间 (ZWSP) 的 Unicode 字符的 HTML 实体。
"In HTML pages, this space can be used as a potential line-break in long words as an alternative to the
<wbr>tag."- Zero-width space - Wikipedia
“在 HTML 页面中,此空格可用作长单词中的潜在换行符,作为
<wbr>标记的替代。”-零宽度空格 - 维基百科
The <wbr>tag also works, as mentioned by Aaron's answer. I think I prefer this HTML entity over the tag because the entity seems simpler: unicode handles it, not the web browser.
<wbr>正如Aaron's answer所提到的,该标签也有效。我想我更喜欢这个 HTML 实体而不是标签,因为实体看起来更简单:unicode 处理它,而不是 web 浏览器。
回答by Aaron Maenpaa
<wbr>looks like it does what you want, butit looks like the support for it, and ­for that matter, is very inconsistent. So unfortunately, there may not be a particularly good way to do what you want.
<wbr>看起来它做了你想要的,但看起来它的支持­,就此而言,是非常不一致的。所以不幸的是,可能没有特别好的方法来做你想做的事。
回答by Geoff Kendall
I'll post this as an answer, in 2019, although it draws its substance entirely from other contributions on this page: use <wbr>. It works well in allowing the wrap of long URLs and so not having them break out of content boxes. Users being able to paste the link you show into a web browser does matter and support for <wbr>is good in modern browsers, according to caniuse.com and my own quick tests in Chrome and Firefox for Android. I replaced forward slashes with forward slashes and a WBR, URLs now wrapping nicely.
我将在 2019 年将此作为答案发布,尽管它的实质内容完全来自此页面上的其他贡献:使用<wbr>。它可以很好地允许长 URL 的包装,因此不会让它们脱离内容框。<wbr>根据 caniuse.com 和我自己在 Chrome 和 Firefox for Android 中的快速测试,用户能够将您显示的链接粘贴到网络浏览器中确实很重要,并且在现代浏览器中支持很好。我用正斜杠和 WBR 替换了正斜杠,现在 URL 包装得很好。

