在css中设置最大字符长度

Question

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

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

我尝试了最大宽度,但这会弄乱我的布局.我正在使用flexbox和mediaqueries来使其响应.

Answer 1

你总是可以通过像这样设置max-width和溢出来使用truncate方法ellipsis

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

一个例子:http://jsfiddle.net/3czeyznf/

对于多行截断,请查看flex解决方案.截断3行的示例.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

一个例子:https://codepen.io/srekoble/pen/EgmyxV

Answer 2

有一个CSS'长度值' ch.

来自MDN

此单位表示元素字体中字形'0'(零,Unicode字符U + 0030)的宽度,或更准确地说是提前度量.

这可能与你所追求的近似.

p {
  overflow: hidden;
  max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

Answer 3

尝试将其设置为max-width后截断字符.在这种情况下我使用过75ch

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

对于多行截断,请点击链接.

一个例子:https://codepen.io/srekoble/pen/EgmyxV

我们将使用webkit css.简而言之,WebKit是Safari/Chrome的HTML/CSS Web浏览器渲染引擎.这可能是特定的,因为每个浏览器都由渲染引擎支持以绘制HTML/CSS网页.

Answer 4

示例代码:

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>

    

Answer 5

使用Chrome，您可以设置“ -webkit-line-clamp ” 显示的行数：

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

所以对我来说，它是在扩展程序中使用的，因此它是完美的，请在此处获取更多信息：https : //medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -broken-865413f16e5

Answer 6

这对于 CSS 来说是不可能的，你必须使用 Javascript。虽然您可以将 p 的宽度设置为最多 30 个字符，并且下一个字母会自动向下排列，但同样，这不会那么准确，并且如果字符为大写，则会有所不同。

Answer 7

现代 CSS 网格答案

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

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

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

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

p {
  grid-column: 2 / 3;
}

它是这样的（查看CodePen以获得完整的工作示例）：

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

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

p {
  grid-column: 2 / 3;
}