HTML: Create a line that text can't pass-CodePudding

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

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

CodePudding user response：

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 acheive what you want to do. Best of luck</p>

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

CodePudding user response：

One way to fix your problem is to add a width to parent HTML element, like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A page for you</title>
    <style>
       .container1 {
         width: 150px;
       }
       ul {
       
        background-color: rgba(255, 255, 169, 0.6);
       
       }
    </style>
</head>
<body>
    <div class="container1">
        <ul>
          <li>short</li>
          <li>long text</li>
          <li>cat</li>
          <li>onions aren't fruit</li>
          <li>superman</li>
        </ul>
    </div>
    <div class="container2">
        <ul>
          <li>short</li>
          <li>long text</li>
          <li>cat</li>
          <li>onions aren't fruit</li>
          <li>superman</li>
        </ul>
    </div>
</body>
</html>

CodePudding user response：

you could try putting the whole thing in a div and set the width of it to a desired size.