在 CSS 中设置最大字符长度

您始终可以通过像这样设置 max-width 和溢出 ellipsis 来使用截断方法

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

一个例子：

.wrapper { 填充：20px;背景：#eaeaea；最大宽度：400px；边距：50px 自动； } .demo-1 { 溢出：隐藏；显示：-webkit-box； -webkit-line-clamp：3； -webkit-box-orient：垂直； } .demo-2 { 溢出：隐藏；空白：nowrap；文本溢出：省略号；最大宽度：150px； }

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

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

一个例子：

p {空白：nowwrap；溢出：隐藏；文本溢出：省略号；最大宽度：200px； }

Lorem Ipsum Dolor Sit Amet，Consectetur Adipisicing Elite。 Deserunt rem audit quis quaerat。在痛苦的证词中，这种后果性的暨不可能逃脱干燥的 voluptas 和可能的 voluptatibus！

---

有一个 ch 的 CSS“长度值”。

From MDN

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

这可能近似于您所追求的。

{ 溢出：隐藏；最大宽度：75ch； }

疼痛本身很重要，接下来会去脂肪化。他讨厌他正在寻找什么。在当下的痛苦中，他希望它是他逃离追随快乐的结果，这样我们就可以放弃快乐，除非它发生！但是，快乐或痛苦的痛苦似乎来自于拒绝。我将至少解释需要做什么，而不是减轻任何否认的痛苦。

---

在将其设置为最大宽度后尝试截断字符。在这种情况下，我使用了 75ch

p {空白：nowrap；溢出：隐藏；文本溢出：省略号；最大宽度：75ch； }

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin nisi ligula、dapibus a volutpat sat amet、mattis 等。Lorem ipsum dolor sit amet、consectetur adipiscing elit。 Proin nisi ligula、dapibus a volutpat sat amet、mattis 等。

对于多行截断，请点击链接。

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

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

---

示例代码：

.limited-text{ 空白：nowrap;宽度：400px；溢出：隐藏；文本溢出：省略号； }

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。

---

使用 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

---

这在 CSS 中是不可能的，你必须使用 Javascript。尽管您可以将 p 的宽度设置为最多 30 个字符，并且下一个字母会自动下降，但这又不会那么准确，并且如果字符是大写的，则会有所不同。

---

HTML

<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>

jQuery

var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

CSS

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

结果

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Proin nisi ligula, dapibus a volutpat sat amet, mattis et...

Jsfiddle

---

现代 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;
}

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

https://i.stack.imgur.com/OcDJK.png

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

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

p {
  grid-column: 2 / 3;
}

---

截断多行字符的纯 CSS 解决方案

我遇到了类似的问题，并从 Hackingui.com 中找到了这个出色的纯 CSS 解决方案。您可以阅读文章以获取信息，但以下是主要代码。

我测试了它，它工作得很好。希望有人在选择 JS 或服务器端选项之前发现它很有用

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

---

这篇文章是针对 CSS 解决方案的，但是这篇文章已经很老了，所以以防万一其他人偶然发现它并使用了 Angular 4+ 等现代 JS 框架，有一种简单的方法可以通过 Angular Pipes 做到这一点，而无需乱用 CSS。

也可能有“React”或“Vue”的方式来做到这一点。这只是为了展示如何在框架内完成。

截断-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

---

https://i.stack.imgur.com/OdFb5.png

完全支持所有浏览器。

---

用 2 种不同的方式尝试我的解决方案。

<div class="wrapper">
      <p class="demo-1">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>
</div>

<div class="wrapper">
  <p class="demo-2">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>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

---

您始终可以查看字体的宽度并获取平均字符像素大小。然后只需将其乘以您想要的字符数。这有点俗气，但它可以作为一个快速修复。

---

75 个字符

我尝试了最大宽度，但这弄乱了我的布局。

使用 max-width: 75ch，然后创建一个在您超过此宽度时不会混乱的布局。

---