-1

I have a huge sentence as below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.

I want to break this huge sentence at every 6th word. so it should look as below:

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis
nostrud ullamco laboris nisi ut aliquip
ex ea commodo consequat.

I tried the following css rules:

word-break: break-all;

No impact. Next I tried:

 overflow: visible;
    width: 0px;

This is breaking every word to be in a line. any help on how i can word-break at 6th word?

Rick
  • 1,392
  • 1
  • 21
  • 52
  • 4
    It sounds like you are trying to use [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) to add a line-break (a new line), which isn't what it does. Work-break only affects the layout **if the word would overflow its content box**. – DBS Oct 27 '21 at 15:36
  • 2
    Css cannot count the words, it only applies to html elements. But what you can do is to set an average width with a unit that reflects the best your font-size (em, ch, ...) and eventually find what is the average length of a word in the language used on your website. example https://jsfiddle.net/o4w0xLd3/ – G-Cyrillus Oct 27 '21 at 15:38
  • 1
    This link from Mozilla's Developer guide may be helpful: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text – jrd1 Oct 27 '21 at 15:41

3 Answers3

2

As the other answer mentioned, CSS has no way of adding line breaks.

However, there's a lesser known unit in CSS: ch. Depending on the font you use, you might be able to roughly achieve what you want:

div {
  width: 32.5ch;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

If that doesn't work for your use case, a more reliable solution would be to manually add line breaks in your text and then use white-space: pre-wrap to display them, as described in this answer.

Simone
  • 20,302
  • 14
  • 79
  • 103
1

You'll probably want to use your second solution, but set the width to be wide enough for roughly 6 words.

overflow: visible;
width: 100px; /* 6 word width */

There's no way to break on 6 words in CSS, the alternative is adding <br /> after every 6th word in JS or some pre-processor.

Dan P
  • 786
  • 7
  • 18
  • This worked for me. I didn't realize the meaning of width in combination with overflow, but setting width right, worked for me. thanks – Rick Oct 27 '21 at 15:47
1

I know you've mentioned you want it in CSS. But if JS is allowed then its easy without any guesses for width. So this will work even if the world length is big.

See the Snippet below:

var text = document.getElementById("text").innerText;

text = text.match(/(\S+ ){1,6}/g).join("<br>");
// You can change the number 6 to whatever you want.

document.getElementById("text").innerHTML = text;
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
Nimitt Shah
  • 4,477
  • 2
  • 10
  • 21