does not line break in CSS

Question

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

Problem is `
` with bunch of 0s doesn't have any spaces like lorem ipsum. — Shakya Dissanayake, Oct 30 '22 at 17:28

score 1 · Accepted Answer · answered Oct 30 '22 at 17:28

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>

score 0 · Answer 2 · answered Oct 30 '22 at 17:29

This is the default behavior.

If you want long word to break then CSS lets you set break-word.

Here it is in your code:

<html>

<head>
  <title>Practice</title>
  <style>
    .ch-unit {
      background-color: red;
      width: 10ch;
      overflow-wrap: 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>

MDN has a useful explanation of the various ways of getting CSS to break/wrap words.

does not line break in CSS

2 Answers2