我正在为学校做响应式网站,我的问题是:

我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。

我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。


当前回答

现代CSS网格答案

在CodePen上查看完整的工作代码。给定以下HTML:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

您可以使用CSS Grid创建三个列,并告诉容器将包含段落的中间列的最大宽度设置为70个字符。

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

这是它的样子(Checkout CodePen是一个完整的工作示例):

下面是另一个示例,您可以使用minmax来设置一个值范围。在小屏幕上,宽度将设置为50个字符宽,在大屏幕上,宽度将设置为70个字符宽。

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

其他回答

这在CSS中是不可能的,你必须使用Javascript。虽然你可以设置p的宽度为30个字符,下一个字母会自动下来,但这不会那么准确,如果字符是大写的,会有所不同。

75个字符

我已经尝试了最大宽度,但这打乱了我的布局。

使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。

现代CSS网格答案

在CodePen上查看完整的工作代码。给定以下HTML:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

您可以使用CSS Grid创建三个列,并告诉容器将包含段落的中间列的最大宽度设置为70个字符。

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

这是它的样子(Checkout CodePen是一个完整的工作示例):

下面是另一个示例,您可以使用minmax来设置一个值范围。在小屏幕上,宽度将设置为50个字符宽,在大屏幕上,宽度将设置为70个字符宽。

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

你可以看看你的字体有多宽,然后取平均字符像素大小。然后再乘以你想要的字符数。这有点俗气,但它是一种快速的解决方法。

示例代码:

.limited-text { 空白:nowrap;} 宽度:400 px; 溢出:隐藏; 文本溢出:省略; } <p class="limited-text">我爱你,我爱你。时间和欲望是错误的,是腐败的,是幸福的!</p> .</p