HTML: Create a line that text can't pass

I was wondering if there was a way to create like an invisible line that my text can't pass through in html. Example: enter image description here

As you can see, the text can't go too far and a line break is initiated. How do I do this?

U can use in-line property and overflow-wrap for the same.

overflow-wrap

If the box needs to be a fixed size, or you are keen to ensure that long words can't overflow, then the overflow-wrap property can help. This property will break a word once it is too long to fit on a line by itself.

.box {
  inline-size: 150px; 
  overflow-wrap: break-word;
}

<div class="box">
     <p>Hi I think this will help you achieve what you want to do. Best of luck</p>

     <p>Hi I think this will help you achieve what you want to do. Best of luck</p>
</div>

HTML: Create a line that text can't pass

Related

Recent Posts