始终不可见的可选换行 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:15:21  来源:igfitidea点击:

Optional line-breaking HTML entity that is always invisible

htmlline-breakshtml-entities

提问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 &shy;for that matter, is very inconsistent. So unfortunately, there may not be a particularly good way to do what you want.

<wbr>看起来它做了你想要的,看起来它的支持&shy;,就此而言,是非常不一致的。所以不幸的是,可能没有特别好的方法来做你想做的事。

回答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 包装得很好。