CSS Break after 2 Words

Have you ever wanted to break a long string of text into shorter lines after a certain number of words? This is a common requirement when designing responsive web layouts that adapt to different screen sizes. In this article, we'll explore how to achieve this effect with CSS.

The word-wrap Property

The word-wrap property controls whether or not long words will wrap to the next line. By default, this property is set to normal, which means that long words will overflow the container if there is not enough space. However, if we set word-wrap to break-word, long words will be broken and wrap to the next line.

p {
  word-wrap: break-word;
}

This works fine if we want to break the text on any long word, regardless of its position in the text. However, if we want to break the text on specific intervals, such as after every 2 words, we need a different approach.

Using the :nth-child Selector

The :nth-child selector allows us to apply CSS styles to specific elements based on their position in a parent container. We can use this selector to target every second word in a block of text and insert a line break after it.

p span:nth-child(2n) {
  display: block;
  margin-bottom: 10px;
}

In this example, we're selecting every second span element inside a p element and setting its display property to block. This makes each second word appear on a new line. We're also adding a margin-bottom property to create some spacing between the lines.

Putting it All Together

To break a block of text into lines after every 2 words, we combine the two techniques we've just learned:

p {
  word-wrap: break-word;
}

p span:nth-child(2n) {
  display: block;
  margin-bottom: 10px;
}

This will apply the word-wrap property to the entire block of text, and then insert a line break after every second word. The result will be a neatly formatted block of text that adapts to different screen sizes and avoids overflowing the container.

Conclusion

Breaking text into lines after a certain number of words is a useful technique for responsive web design. With CSS, we can achieve this effect by using the word-wrap property to break long words, and the :nth-child selector to insert line breaks after specific intervals. By combining these techniques, we can create well-formatted, responsive text that adapts to different screen sizes.