Angular: How to drop a line by the number of characters in the message?-CodePudding

This is an illustration image:

I want after a certain amount of characters to go down a line in the text.

I tried to do it in html:

<div *ngIf="msgText.length > 30">
      <br>
    </div>

But it's not good

CodePudding user response：

You can use a pipe to do that:

@Pipe({ name: 'wrapLine' })
export class WrapLinePipe implements PipeTransform {
  transform(value: string, length = 30): string {
    return [value.slice(0, length), value.slice(length)].join('<br>');
  }
}

<p [innerHTML]="someVariable | wrapLine"></p>

See working example

CodePudding user response：

You can do this with CSS using word-break: break-all; if actual character count doesn't matter and you just want to break words up based on the container size. This requires that you have a width on the container element.

break-all

To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

.split-text {
  word-break: break-all;
  width: 100px;
  border: solid 1px red;
}

<div >
  BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah
</div>