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

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

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不受支持就可以了。）

这不能完全用css来完成，所以我建议使用javascript函数来完成

下面是一个使用特殊html实体

​

执行换行操作，如果需要，将剪切文本。如果不需要换行符，它将创建一个可见的空白

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

var span=document.getElementsByClassName（“cutme”）；
对于（变量i=0；i

表格{
宽度：200px；
}
运输署{
边框底部：纯色2px黑色；
}

一些\u随机\u文件夹/my\u long\u filename.txt
文件夹/filename.txt
一些\u随机\u文件夹/my\u long\u filename.txt

如果“some\u random\u folder/”部分的长度已知，

@media all和max width

可以被黑客攻击，将空白（添加在下划线后，作为

）包装到特定窗口宽度以下。在下面的示例中，10em在我的浏览器上工作。（当宽度小于7em时，它甚至在字符级别进行换行。）我更改颜色以显示它开始换行的时间

.wrap{空白：nowrap；字体系列：monospace；}
@全部和全部介质（最大宽度：10em）{
.wrap{空白：正常；颜色：蓝色；}
}
@介质和全部（最大宽度：7em）{
.wrap{word break:break all；word wrap:break-word；color:red；}
}

---

some_random_folder/my_long_filename.txt

恐怕只有css做不到这一点，但一个简单的javascript可以满足您的需要。谢谢，@Esko。我怎样才能在Javascript中做到这一点？如果你愿意使用Javascript来解决这个问题——而且你必须这样做，因为CSS不可能做到这一点——那么请将你的问题包含在Javascript标记中。：）“运行代码片段”不起作用，因为它覆盖了

空白：nowrap

。将其另存为本地文件并打开。

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