html - 在表格中用 css 包装单词

Question

我有一个表格，其中一行看起来像 单词 嗨 Someword/AnotherWord/LastWord

我想使用 css 在“/”符号处打断 hi Someword/AnotherWord/LastWord

现在我的 CSS 看起来像这样:

tbody td {
  padding: 11px 12px;
  word-break: normal;
 }

这个词是这样断的:

hi
Someword/AnotherWord
/LastWord

现在 Someword/AnotherWord 正在表格单元格之外流动。我怎样才能让它看起来像

  hi
  Someword
  /AnotherWord
  /LastWord

我试过了:

word-wrap: 分词;

分词:break-all；

最终在单词中间中断。有没有办法只在“/”处中断？

Answer 1

你不能在 CSS 中这样做。没有规定在不将该字符转换为元素(或元素的第一个或最后一个字符)的情况下指定字符后的强制或可选换行符。通常，CSS 适用于元素，而不适用于字符。

浏览器是否自动将“/”视为允许在其前后换行取决于浏览器。实际上，一些浏览器将其视为允许在其之后进行中断(这在许多情况下是有意义的)，但几乎不在其之前。

有多种方法允许或强制在 HTML 中换行，可能借助于 CSS。如果您不能直接修改 HTML，则需要使用客户端 JavaScript(以添加元素)。