IMG-LOGO

How to style new line character in CSS?

andy - 29 Jan, 2019 3152 Views 0 Comment

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.

Related Articles

How to draw a circle in CSS?

In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.

How to create rounded image using CSS3?

In this tutorial you will learn on how to create a rounded image in CSS3. We will use CSS property called border-radius to create this rounded image effect.