1

I got a <p> element containing several <span> elements, and I am trying to add linebreaks at wherever the container wraps. However, it currently breaks on the spans.

Visual example:

Lorem Ipsum Dolor | Sit amet | conseceteuerblabla |

What I try to achieve:

Lorem Ipsum Dolor Si| t amet conseceteuerb| labla |

How can you achieve this preferably using the same markup?

My code:

p { font-family: monospace; font-size: calc(2em + 3vw); word-break: break-word; } span { word-break: break-word; }
<p> <span>Lorem</span> <span>Ipsum</span> <span>Dolor</span> <span>Sit</span> <span>azerty</span> <span>qwerty</span> <span>asdfghjk</span> <span>qwertyuiopasdfghjkl</span> </p>

Improve this question
2
  • 5
    word-break: break-all Commented Jan 11, 2018 at 12:09
  • 1
    It's isn't breaking on spans, it is breaking on spaces. Commented Jan 11, 2018 at 12:13

2 Answers 2

Reset to default
3

break-word is not a valid value for word-break. You must use break-all

 p { font-family: monospace; font-size: calc(2em + 3vw); word-break: break-all; } span { word-break: break-all; }
 <p> <span>Loremloremlorem</span> <span>Ipsumipsumipsumipsm</span> <span>Dolordolordolordolordolordolor</span> <span>Sitsitsitsitsitsitsit</span> <span>asdasdasdsadasdasdasdasdasd</span> <span>qweqweqweqw</span> <span>zxc</span> <span>tyutyutyutyutyutyutyutyu</span> </p>

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

you can use

P{ word-break: break-all; }

instead of word-break: break-word;

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.