CSS white-space long text not wrapping to next line

Question

I have the following structure rendered dynamically in DOM

<div>
  <span>
    <label>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</label>
    </span>
</div>

For the above case (long text with all W's), I want to wrap the text to the next line (or even truncating text with ellipsis is fine if that can be done via CSS)

I have already tried all the values for white-space (tried applying to all the 3 DOM elements), but it is not wrapping. Is there some other property I need to check which might be preventing text from wrapping to next line?

Just to add, I have this structure within a flex container.

Answer 1

You need word-break: break-word; or overflow-wrap: break-word; on the label element. But please consider that your example is completely unrealistic – real sentences / phrases contain spaces, and real words are hardly ever that long.

div {
  width: 200px;
}

label {
  overflow-wrap: break-word;
}

<div>
  <span>
    <label>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</label>
  </span>
</div>

Answer 2

Add word-break style to it.

label {
  word-break: break-word
}

<div>
  <span>
    <label>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</label>
    </span>
</div>