始终不可见的可选换行 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 包装得很好。