在CSS中设置行长度（并将文本适配到容器）

First, what is line length? Line length is the length of a container that holds a body of multi-line text. “Multi-line” is the key part here, because text becomes less readable if the beginning of a line of text is too far away from the end of the prior line of text. This causes users to reread lines by mistake, and generally get lost while reading.

首先，什么是行长度？行长度是一个容器的长度，该容器包含多行文本。 “多行”是这里的关键部分，因为如果一行文本的开头离前一行文本的结尾太远，文本的可读性就会降低。这会导致用户错误地重读行，并在阅读时感到迷失。

Luckily, the Web Content Accessibility Guidelines (WCAG) gives us a pretty hard rule to follow: no more than 80 characters on a line (40 if the language is Chinese, Japanese, or Korean), which is super easy to implement using character (ch) units:

幸运的是，网页内容无障碍指南（WCAG）给了我们一个相当严格的规则：每行不超过80个字符（如果语言是中文、日文或韩文，则为40个），这使用字符（ch）单位实现起来非常简单：

width: 80ch;

The width of 1ch is equal to the width of the number 0 in your chosen font, so the exact width depends on the font.

1ch的宽度等于您选择的字体中数字0的宽度，因此确切的宽度取决于字体。

Just because you’re allowed up to 80 characters on a line, it doesn’t mean that you have to aim for that number. A study by the Baymard Institute revealed that a line length of 50-75 characters is the optimal length — this takes into consideration that smaller line lengths mean more lines and, therefore, more opportunities for users to make reading mistakes.

仅仅因为你被允许在一行中使用最多 80 个字符，并不意味着你必须以这个数字为目标。Baymard Institute 的一项研究表明，50-75 个字符的行长度是最佳长度——这考虑到较小的行长度意味着更多的行，因此用户更容易出现阅读错误。

That being said, we also have responsive design to think about, so setting a minimum width (e.g., min-width: 50ch) isn’t a good idea because you’re unlikely to fit 50 characters on a line with, for example, a screen/window size that is 320 pixels wide. So, there’s a bit of nuance involved, and the best way to handle that is by combining the clamp() and min() functions:

话虽如此，我们还需要考虑响应式设计，因此设置最小宽度（例如，min-width: 50ch）并不是一个好主意，因为在例如宽度为320像素的屏幕/窗口上，您不太可能在一行中放下50个字符。因此，这涉及到一些细微差别，处理这个问题的最佳方法是结合使用clamp()和min()函数：

clamp(): Set a fluid value that’s relative to a container using percentage, viewport, or contain...