如何使用 CSS 在 n 个字符后中断？答案

【问题标题】：How to break after n characters with CSS?如何使用 CSS 在 n 个字符后中断？
【发布时间】：2020-11-07 10:12:30
【问题描述】：

我需要每 20 个字符打破我的表格单元格。

我发现，CSS 中有一个 ch 单元可以让我像这样限制我的 max-width：

td {
    max-width: 20ch;
}

这样做会限制单元格的宽度，但不会破坏/缠绕我的字符串。我尝试申请word-wrap: break-word，但这也没有帮助我。

td {
    max-width: 20ch;
    word-wrap: break-word; /* does not work */
}

顺便说一句：我的大多数单元格都包含没有空格的字符串。也许这是必要的信息。

编辑

抱歉编辑晚了，但经过一番调查，我发现我的 <table> 在我的表库中有 css 属性 white-space: nowrap;。这导致我的word-wrap: break-word; 失效。

【问题讨论】：

你试过word-wrap: break-all吗？这将有助于打破您的文本并转移到第二行。
请显示完整的 HTML。它似乎对我有用：jsfiddle.net/uaon3mz7
如果我是正确的 max-width 仅适用于块元素。对于表格，有宽度，但如有必要，它们会增长以适应内容。将宽度和自动换行结合起来可能会更好。

标签： html css html-table css-tables

【解决方案1】：

td {
  border-style: solid;
  max-width: 20ch;
  word-wrap:break-word;
}

<table>
  <td>
    a;lksjf;dsfasd;lakfjdskl;fadslkfjdsa;lkfdsfa;lkdsjfads;
  </td>
</table>

这就是你的想法吗？

【讨论】：

这些与 OP 使用的属性完全相同。你可以设置td 的样式就好了。不需要额外的 div。我认为 OP 的 HTML 而非 CSS 存在问题。与td 一起工作就好了：jsfiddle.net/uaon3mz7
谢谢原来没看到。

【解决方案2】：

单元ch 不能这样工作。

表示元素字体中字形“0”（零，Unicode 字符 U+0030）的宽度，或更准确地说是提前量度。 Source: mozilla

这意味着它将计算“0”的宽度（基于字体）并将其乘以值（在您的情况下为 20 次）。这意味着您可以将“0”放入其中 20 次。它不会在任何 20 个字符后中断。仅使用css 不能在 20 个字符后断字（只要字符的宽度不同）。您需要像 PHP 或 JavaScript 这样的可编程 功能来实现这一点。

【讨论】：

谢谢您的有用提示，先生！

【解决方案3】：

您可以使用monospace 字体以相同的宽度呈现所有字符和word-wrap:break-word，但由于某种原因，sn-p 中的20ch 将导致 16 个字符，因此您需要找到一个允许 20 个字符的设置，在我的设置（Mac 上的 Firefox）中是24ch：

td {
  font-family: monospace;
  border: 1px solid #ddd;
  max-width: 24ch;
  word-wrap:break-word;
}

<table>
  <td>
    oiuhncoiuhOOSFwrevi987OINDVouhnweoriuhneaörlvjneriunONVWöoiunoiSAJunwrvwoiunVA
  </td>
</table>

【讨论】：