当前位置：文江博客话题详情

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

发布于 2024-12-17 00:34:49 字数 331 浏览 11 评论 0 原文

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

我认为 overflow:hidden 不起作用，因为一半的文本将被隐藏。

在 CSS 中强制换行斜杠 (/) 和破折号 (-) 的最佳方法是什么（希望如此）？

它应该适用于 IE7+、Chrome、Firefox 和 Safari。

使用 Rails 3 和 jQuery。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小情绪 2024-12-24 00:34:49

太长；博士；（2022 年 4 月编辑）

在每个 / 之前使用 word-break-opportunity 元素。请参阅下面进一步阅读中的第一个链接。

详细信息（2014 年原创）

虽然 css word-wrap:break-word; 确实有效，但其实现在不同浏览器中有所不同。

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

分词符（除 IE8 之外的所有主要浏览器均支持 CanIUse.com);
零宽度空格 (U+200B) - 在 IE<=6
软连字符中很难看 - 当然，这会在以下情况下添加连字符打破这并不总是我们所希望的。

我有一个庞大的企业用户群，他们仍然需要使用 IE8，所以当我遇到这个问题时，我在服务器端代码。

问题：如果您在电子邮件地址中插入零宽度空格，当用户复制并粘贴到其电子邮件客户端时，该空格也会被复制，并且电子邮件将失败，用户无法了解原因（空格为零）宽度...）

引用

堆栈溢出
http://www.quirksmode.org/oddsandends/wbr.html - 带有示例

进一步阅读

https://developer.mozilla。 org/en-US/docs/Web/HTML/Element/wbr#example
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://kenneth.io/blog/2012/03/ 04/word-wrapping-hypernation-using-css/（2012 年 3 月）
https://css-tricks.com/almanac/properties/w/word-break/ （2012 年 9 月）
https://css-tricks.com/almanac/properties/h/hyphenate/（2011 年 9 月）

回复收藏 0 原文

很快妥协 2024-12-24 00:34:49

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

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

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

我在以下环境中测试过：IE 6/7/8、Firefox 7、Opera 11、Safari 5、Chrome 15

这是一个 jsfiddle：https://jsfiddle.net/p4SxG/

You can use word-wrap : break-word; like so:

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

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

I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15

Here is a jsfiddle: https://jsfiddle.net/p4SxG/

回复收藏 0 原文

天荒地未老 2024-12-24 00:34:49

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

但是，如果您想在特定字符（例如斜杠字符）处进行中断，则无法使用 CSS 做到这一点，而必须在 HTML 中做到这一点。如果您有权访问 HTML 代码，则可以选择以下任一解决方案：

断字机会标签
零宽度空格
零宽度空格

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

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

# #

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

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

A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars/Workshops</h1>
<h1>Seminars/Workshops</h1>
Breaking with HTML: character-based solution (zero width space characters have been inserted directly both before and after the slash)
<h1>Seminars/Workshops</h1>

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

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

p {
  max-width: 30em;
}

<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>

<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>

If you don’t really care where the breaks happen, the simplest method is to add the style overflow-wrap: break-word;. This will allow long words to break without affecting the breaking of other words.

But if you want to break at specific characters, such as the slash character, you can’t do that with CSS, you have to do it in HTML. If you have access to the HTML code you can choose any of these solutions:

<wbr> word break opportunity tag
zero width space
zero width space

But you don’t always have access to the HTML code. Some web applications won’t allow you to enter code into certain fields; for example, WordPress will filter out any code you enter into a post title. In these situations you may be able to insert a zero-width-space character directly. One way to do this is to use Character Viewer (Mac) or Character Map (Windows), although of course they are a bit tricky to use when it comes to spaces because spaces are invisible. In the case of Character Viewer, when you search for arrow, lots of matches appear, but when you search for zero width space, it appears that no characters were found. But if you click where the blue square is in the second image below, you’ll discover that the character was found, it’s just invisible.

Another way to insert a zero-width-space character directly is to copy and paste one from somewhere else. Between the two hash symbols below is a zero-width-space character. Just copy the hash symbols, paste them where you need the zero-width-space, then carefully delete the symbols without deleting the invisible character between them.

A snippet to demonstrate that these various methods all work:

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

A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars/Workshops</h1>
<h1>Seminars/Workshops</h1>
Breaking with HTML: character-based solution (zero width space characters have been inserted directly both before and after the slash)
<h1>Seminars/Workshops</h1>

Here is a script to process your links and automatically add zero width spaces before every slash, except those in the initial ://

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

p {
  max-width: 30em;
}

<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>

<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>

回复收藏 0 原文

~没有更多了~

关于作者

小忆控

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

太长；博士；（2022 年 4 月编辑）

详细信息（2014 年原创）

引用

进一步阅读

tl;dr; (edited Apr 2022)

Details (original from 2014)

References

Further Reading

关于作者

相关话题

热门标签

推荐作者

5040234068

樱花雨梦

≈。彩虹

雨轻弹

血之狂魔

qq_0bIjwE

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

太长；博士； （2022 年 4 月编辑）

详细信息（2014 年原创）

引用

进一步阅读

tl;dr; (edited Apr 2022)

Details (original from 2014)

References

Further Reading

关于作者

相关话题

热门标签

推荐作者

5040234068

樱花雨梦

≈。彩虹

雨轻弹

血之狂魔

qq_0bIjwE

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

太长；博士；（2022 年 4 月编辑）