CODEWITHSUNDEEP
angular
Amaury Laroze
Amaury Laroze

Reputation: 217

Why my words are divide on innerhtml line break?

I get a html code from my databse with html tag. I want to display it on my site, so i use : [innerHTML]="selectedNews?.content | safe"

If my content is : Lorem ipsum is placeholder text

At the end of a line, the word will be break rather than go to the next line.

Exemple :

Lorem ipsum is placehol
der text

Rather than 

Lorem ipsum is 
placeholder text

How can i fix this ?

Thanks

Upvotes: 0

Views: 150

Answers (1)

Dalorzo
Dalorzo

Reputation: 20014

Add this attribute to the html element where this is added [innerHTML] :

style='word-break: normal;'

You then may want to try this as well:

style='word-break: break-all;'

if I understood correctly you are expecting word-break: normal;

<style>
p {
  width: 170px; 
  border: 1px solid blue;
}

p.a {
  word-break: normal;
}

p.b {
  word-break: break-all;
}
</style>
</head>
<body>

<h3>word-break: normal:</h3>
<p class="a">Lorem ipsum is 
placeholder text</p>

<h3>word-break: break-all:</h3>
<p class="b">Lorem ipsum is 
placeholder text</p>

</body>
</html>

Upvotes: 4

Related Questions