Angluar prints in one line even when the text does not fit-CodePudding

I use

<div>
     <p>
        {{text}}
    </p>
</div>

Text is just string. And if text lenght out of div width angular anyway spell it in one line.

But <p> element width is correct

So how I can fix it? I want all text in div with line breaks when needed

CodePudding user response：

Apply the following style to the element

word-break: break-all;

<div>
   <p style="word-break: break-all">
    {{text}}
   </p>
</div>

Or else you can write a class add use it since it may needed in other places also.

CodePudding user response：

word-break: break-all;

    <div>
       <p style="width: 100px; background: aqua; word-break: break-all; ">
        {{aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa}}
       </p>
    </div>

line-break: anywhere;

<div>
           <p style="width: 100px; background: aqua; line-break: anywhere; ">
            {{aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa}}
           </p>
        </div>