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

这篇文章是关于一个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>

您总是可以通过设置max-width和溢出省略号来使用截断方法

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

一个例子:

.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; } <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>

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

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

一个例子:

p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：200px; } <p>Lorem ipsum dolor sit amet， consectetur adipisicing elit.Deserunt rem odit quis quaerat.In dolorem praesentium velit ea esse consequuntur fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet！</p>

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

用两种不同的方法试试我的解决方案。

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

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

p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：75通道; } <p>Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。</p>

如需多行截断，请按此链接。

示例:https://codepen.io/srekoble/pen/EgmyxV

我们将为此使用webkit css。总之，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。这可能是特定于浏览器的，因为每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。