Wrap text when using innerHTML

Question

In Angular 5 app, I need to show some HTML from database. For instance, the text in database could be

<div><u>Documents and Files</u></div><ul><li>These documents needs to be tested and reviewed. Please check the details.</li></ul>

In the app, it is shown as

Using the following code

<div [innerHTML]="description"></div>

This works as expected. The only challenge is that text is wrapped in the middle of the word. In the sample posted, 't' and 'he' are in 2 lines.

I would like to wrap text for the whole word rather than break the word for wrapping. In this case 'the' should be in the next line.

How can I achieve this?

Answer 1

You can add a CSS:

word-wrap: break-word;

as

<li style="white-space: nowrap;">These documents needs to be tested and reviewed. Please check the details.</li>

or try to add a css to your component:

ul li {
    word-wrap: break-word;
}

Demo:

https://stackblitz.com/edit/angular-5-tutorial-4kghvj?file=app/app.component.css