html - 允许在 '/' 中使用中断字符串

Question

我有一个 html<span>标签，其中包含类似于以下内容的文本：

Example 1:
FOO/BAR/FOO9/10/FOO2 BAR2/FOO3BAR3

Example 2:
FOO/BAR/FOO9/10/FOO4\BAR4/FOO3BAR3/FOO5/BAR5

它用于移动环境，因此空间有限。

当字符串包含空格时，该字符串将被分成两行，但有些字符串（见示例 2）缺少任何空格并且它们在移动设备中没有完全显示。

所有字符串都/用于分隔每个单词。无论如何，是否可以使用/与 html 相同的空格来允许中断字符串。

我正在使用引导程序 3，不确定这是否相关。

Answer 1

现代的

HTML5wbr标签“代表断字机会”，就是为此目的而制作的。
我使用路径文本执行此操作，我希望通过在每个路径分隔符之前放置可选的中断来允许包装：

该文件可以在 /etc <wbr/>/httpd <wbr/>/conf <wbr/>/httpd.conf 中找到

这允许路径字符串在任何条目处拆分。<wbr>如果您只想在某些地方中断，您可以更有选择性地选择放置位置。

遗产

当我想要允许中断的路径时，我过去所做的是在每个路径分隔符之前放置一个零宽度非连接符(U+200C) 字符。
我的源文本看起来像这样：

路径是/foo‌/bar‌/foo9‌/etcetera

这不再适用于（大多数）现代浏览器（在 Chrome 和 Firefox 中测试），wbr应改为使用。在撰写本文时，Microsoft Edge仍不支持该<wbr>标签。

如果您必须同时支持旧版和现代浏览器，则可以同时使用：

该文件可以在 /etc <wbr/>‌/httpd <wbr/>‌/conf <wbr/>‌/httpd.conf 中找到

自动化

如果您使用类标记路径，则可以使用 javascript regex 自动完成其中任何一个，例如：

<span class="path">/this/is/my/path</span>

例如，一个简单的 javascript 方式来添加zwnj可能看起来像这样：

var list = document.getElementsByClassName('path');
for (var i = 0; i < list.length; i++) {
    var item = list[i];
    console.log( item.innerText );
    console.log( item.innerText.replace( /\//g, '&zwnj;/') );
}

注意 - 根据您的目的，您可以使用零宽度空间(U+200B) 而不是 U+200C
我喜欢语义化，在我看来，在这种情况下，我不会在字符串中添加空格，而是添加一个可以断弦的地方——但选择取决于你的目的。