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 一样使用空格分隔字符串 .

我正在使用 bootstrap 3，不确定它是否相关。

Answer 1

现代

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

The file can be found at /etc<wbr/>/httpd<wbr/>/conf<wbr/>/httpd.conf

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

---

遗产

当我想让路径允许中断时，我过去常常做的是放一个 Zero Width Non-Joiner每个路径分隔符前的 (U+200C) 个字符。
我的源文本看起来像这样:

The path is /foo‌/bar‌/foo9‌/etcetera

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

如果您必须同时支持传统浏览器和现代浏览器，您可以同时使用:

The file can be found at /etc<wbr/>‌/httpd<wbr/>‌/conf<wbr/>‌/httpd.conf

---

自动化

如果您使用类标记路径，则任何这些都可以使用 javascript 正则表达式自动完成，例如:

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

例如，添加 zwnj 的普通 javascript 方法可能看起来像这样:

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
我喜欢语义化，在我看来，在这种情况下，我没有向字符串添加空格，而是添加了一个字符串可以断开的位置 —但选择取决于您的目的。