用省略号截断文本但不截断最后一个单词答案

【问题标题】：Truncate text with ellipses but without cutting the last word用省略号截断文本但不截断最后一个单词
【发布时间】：2021-08-25 06:02:50
【问题描述】：

我用省略号截断了我的标题，将其限制为 3 行和 150 个字符，但我的最后一句话被删掉了。我一直在寻找解决方案，但没有找到适合我的解决方案。

在我的 html 中：

  <span class="w-100 data-set-card-title data-set-card-title-margin">{{card.resource_title}</span>

在我的 CSS 中：

font-size: 20px;
    font-weight: 400;
    color: $rudi-primary-color;
    display: -webkit-box;
    margin-bottom: 5px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
    min-height: 1.2em;

结果：

人们早就知道，使用可读、有意义的文本会分散注意力，并且会分散对布局本身的关注。 Lor的优势……（最后一个字是Lorem）

我想要什么：

人们早就知道，使用可读、有意义的文本会分散注意力，并且会分散对布局本身的关注。的优点...（所以我们不会把中间的词删掉）。

如果你对我有任何建议，我接受

【问题讨论】：

标签： html css angular10

【解决方案1】：

我找到了一个使用管道的解决方案，对于那些会遇到同样问题的人：

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'truncateText'
})
export class TruncateTextPipe implements PipeTransform {

  transform(value: string, length: number): string {
    const biggestWord = 50;
    const elipses = "...";
    if (typeof value === "undefined") return value;
    if (value.length <= length) return value;
    //.. truncate to about correct lenght
    let truncatedText = value.slice(0, length + biggestWord);
    //.. now nibble ends till correct length
    while (truncatedText.length > length - elipses.length) {
      let lastSpace = truncatedText.lastIndexOf(" ");
      if (lastSpace === -1) break;
      truncatedText = truncatedText.slice(0, lastSpace).replace(/[!,.?;:]$/, '');
    }
    return truncatedText + elipses;
  }
}

-模板：

<span class="w-100 data-set-card-title data-set-card-title-margin" *ngIf="mediaSize.isMd">{{card.resource_title **| truncateText: 80**}}</span>

【讨论】：