Published on: 29 Jan, 2019

How to style new line character in CSS?

Tumblr Digg Google Plus

You may have an issue with the display of your text content where it does not display the new line character. All of the text is display into one line. This issue because the new line character style has not been styled properly in CSS. You can easily fix this new line character issue in CSS by using the white space property.

Let's say your guest writes a blog comment contains multiple paragraphs. If your comment blog text is wrapped with a div HTML tag and has a CSS class named comment-text. What you need to do is to include the following CSS style.

.comment-text{
	white-space: pre-line;
}

Instead of displaying the comment text into one big chunk of one line paragraph. The style should automatically create a new line break for each comment paragraph they wrote. Give it a try and it should looks exactly what they wrote in the comment text box.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.