CODEWITHSUNDEEP
javascriptcssangularinnerhtml
kayasa
kayasa

Reputation: 2085

Wrap text when using innerHTML

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

Wrap Text

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?

Upvotes: 5

Views: 4418

Answers (3)

tfa
tfa

Reputation: 1689

.yourclass {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

Although "word-wrap: break-word" works if the element text caused an overflow (flex grow) it becomes truncated so using the above works in that event

Upvotes: 0

Naresh Pingale
Naresh Pingale

Reputation: 246

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

Above piece of CSS is all you need for your desired output. Alternative you should also have a look at overflow-wrap this article very well explains overflow-wrap and the difference between both.

Upvotes: 0

HDJEMAI
HDJEMAI

Reputation: 9800

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

Upvotes: 1

Related Questions