Interactive online courses HTML Academy
2026-03-09 14:10 Diff
https://htmlacademy.org/courses/html-css-basics/typography/white-space

As you already know, the browser ignores multiple spaces and line breaks in the HTML code. You can change this behavior using the <pre> tag.

However, CSS provides you with more flexible options for managing spaces and line breaks. The white-space property is responsible for doing this. It has the following values:

  • nowrap – It collapses extra spaces and displays all of the text in one line without any line breaks.
  • pre – It preserves all spaces and line breaks that are included in the source code in a way that is similar to the <pre> tag.
  • pre-wrap — It functions similarly to the pre tag. However, it automatically adds line breaks if the text does not fit inside the container.
  • normal – This is the default mode: extra spaces and line breaks are collapsed. The text is transferred while the spaces at the end of lines are removed.

Actually, white-space property can take two more values:

  • break-spaces – The behavior is identical to pre-wrap but when spaces are collapsed specially marked spaces are preserved, such as spaces at the end of a line.
  • pre-line — The behavior is the same as normal, but extra spaces are collapsed and lines are broken where the line break character and <br> tag are inserted as well as based on how long the line is.