这篇文章是关于一个CSS解决方案的，但这篇文章已经很老了，所以为了防止其他人偶然发现这一点，并且正在使用一个现代的JS框架，比如Angular 4+，有一个简单的方法可以通过Angular Pipes来实现这一点，而不必在CSS上瞎忙活。

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

truncate-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>

在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

示例代码:

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

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

在所有浏览器中完全支持。

75个字符

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

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