Как ограничить количество символов в абзаце?

Question

У меня есть приложение angular, и я хочу ограничить количество символов в абзаце (p). Так что он даст возврат после, скажем, 50 символов.

Итак, у меня есть этот шаблон:

<section class="echeq-element-html-display border-box"
    [ngClass]="{isYoutubeVideo: isYoutubeVideo}"
    [innerHTML]="doHtmlDisplay(echeqElement)"
></section>

ts:

@Component({
  selector: 'app-html-display',
  templateUrl: './html-display.component.html',
  styleUrls: ['./html-display.component.css']
})

doHtmlDisplay(eCheqElement: EcheqElement): SafeHtml {
  return this.returnSafeHtml(this.getHtml(eCheqElement));
}

, и это мой css:

p {
  text-decoration: underline;
  text-overflow: ellipsis; /* will make [...] at the end */
  width: 50px; /* change to your preferences */
  white-space: nowrap; /* paragraph to one line */
  overflow: hidden; /* older browsers */
}

Но это не работает.

Итак, что мне нужно изменить?

Спасибо

есть еще главный. css:

p {
  margin: 0 0 0.75em;
}

Но, конечно, я просто хочу получить максимальное количество символов для этого компонента, которого нет в целиком приложение.

в ts скрипте, теперь у меня вот так:

truncateText(selector, maxLength) {
    let element = document.querySelector(selector),
      truncated = element.innerText;

    if (truncated.length > maxLength) {
      truncated = truncated.substr(0, maxLength) + '...';
    }
    return truncated;
  }

и в шаблоне:

<section  class="echeq-element-html-display border-box" (input)="truncateText('p', 10)" [ngClass]="{isYoutubeVideo: isYoutubeVideo}" [innerHTML]="doHtmlDisplay(echeqElement)"></section>

Но ничего не меняется.

Answer 1

ваш css должен работать, проверьте значение white-space в инструментах разработчика браузера

Также вы можете попробовать сделать это в машинописном тексте

document.querySelector('p').innerText = truncateText('p', 50);

function truncateText(selector, maxLength) {
    var element = document.querySelector(selector),
        truncated = element.innerText;

    if (truncated.length > maxLength) {
        truncated = truncated.substr(0,maxLength) + '...';
    }
    return truncated;
}