Css - (Line|word) (wrap|Breaking)


Line breaking, also known as word wrapping, is the process of breaking a section of text into lines such that it will fit in the available width of a page, window or other display area (such as a viewport)

It allows

  • text to be read from top to bottom without any horizontal scrolling.
  • the display of text to adapt flexibly and dynamically to displays of varying sizes.



Break by character


Break lines between words rather than within words.

Word wrap makes it unnecessary to hard-code newline delimiters within paragraphs

Soft vs hard


A soft return or soft wrap is the break resulting from line wrap or word wrap (whether automatic or manual),


A hard return or hard wrap is an intentional break, creating a new paragraph.

Documentation / Reference

Discover More
CSS - White space property (prevent wrap)

The white-space prevent the text to wrap up in a second line. where: Media: visual Values have the following meanings: normal (default): collapse sequences of white space, and break lines as...
Grid Form With Horizontal Vertical Alignment
How to solve a CSS grid overflow ?

This page will show and explain you why a overflow may happen in a css grid layout context. This simple example shows: a two columns grids that should have the same space because they get...

Share this page:
Follow us:
Task Runner