<p> does not line break in CSS

October 30, 2022

I used ch unit for my width. I was just wondering why does the second p does not automatically line break after 10ch. The 0 is maximizing the width of my screen instead of breaking just like the first p with the lorem text.

Here is the HTML and CSS Code:

<html>
  <head>
    <title>Practice</title>
    <style>
      .ch-unit {
        background-color: red;
        width: 10ch;
      }
    </style>
  </head>
  <body>
    <div class="ch-unit">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti,
        saepe ad? Iure corrupti laborum pariatur, eos amet officia deserunt sit
        quasi quam provident facere eum commodi! Vel soluta eum fugiat.
      </p>
      <p>
        0000000000000000000000000000000000000000000000000000000000000000000000
      </p>
    </div>
  </body>
</html>

Here is the screenshot

>Solution :

You should add word-break: break-word;:

.ch-unit {
  background-color: red;
  width: 10ch;
  word-break: break-word;
}

<html>
  <head>
    <title>Practice</title>
    <style>
      .ch-unit {
        background-color: red;
        width: 10ch;
        word-break: break-word;
      }
    </style>
  </head>
  <body>
    <div class="ch-unit">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti,
        saepe ad? Iure corrupti laborum pariatur, eos amet officia deserunt sit
        quasi quam provident facere eum commodi! Vel soluta eum fugiat.
      </p>
      <p>
        0000000000000000000000000000000000000000000000000000000000000000000000
      </p>
    </div>
  </body>
</html>