在 CSS 中对不同字符的文本换行设置优先级

Question

我想在表的一列中显示文件的路径，例如

some_random_folder/my_long_filename.txt

这样当我需要包装它时，它将首先在斜杠处换行，然后在下划线处换行，例如用"|"显示列宽：

|some_random_folder/           |
|my_long_filename.txt          |

而不是

|some_random_folder/my_long_   |
|filename.txt                  |

当然，如果列太窄，它仍然在下划线处换行：

|some_random_    |
|folder/         |
|my_long_        |
|filename.txt    |

这也很好：

|some_random_    |
|folder/my_long_ |
|filename.txt    |

我知道我可以添加来建议包装的地方，但这似乎只有一个优先级。

这在纯CSS中可能吗？(如果不支持 IE/Edge 也没关系。

Answer 1

这不能纯粹在 css 中完成，所以我建议为此使用 javascript 函数。

下面是一个示例，使用特殊的 html 实体​执行换行符，如果需要，该换行符将剪切文本。如果不需要换行符，则不会创建可见的空格。

这只是一个基本示例，在第一个"/"字符后添加换行符，如果需要，您可以使用可能需要添加更多换行符的所有其他逻辑对其进行扩展：

var spans = document.getElementsByClassName("cutme");
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
var index = span.innerText.indexOf("/");
var text = span.innerText;
span.innerHTML = text.substring(0, index + 1) + "&#8203;" + text.substring(index + 1);
}

table {
width: 200px;
}
td {
border-bottom: solid 2px black;
}

<table>
<tbody>
<tr>
<td class="cutme">
some_random_folder/my_long_filename.txt
</td>
</tr>
<tr>
<td class="cutme">
folder/filename.txt
</td>
</tr>
<tr>
<td class="cutme">
some_random_folder/my_long_filename.txt
</td>
</tr>
</tbody>
</table>

Answer 2

如果已知"some_random_folder/"部分的长度，则可以破解@media all and max-width以将空格(在下划线后添加为<wbr />(括在某个窗口宽度以下。 在下面的示例中，10em 适用于我的浏览器。(当宽度低于 7em 时，它甚至可以在字符级别换行。我更改颜色以显示它何时开始包装。

.wrap { white-space:nowrap; font-family:monospace; }
@media all and (max-width:10em) {
.wrap { white-space:normal; color:blue; }
}
@media all and (max-width:7em) {
.wrap { word-break:break-all; word-wrap:break-word; color:red; }
}

<span class="wrap">some_<wbr />random_<wbr />folder/</span><wbr /><span class="wrap">my_<wbr />long_<wbr />filename.txt</span>