How to Insert Line Break in CSS


In this tutorial we will see how to apply CSS line breaks in web pages.

Don’t forget to check out our site for more free how-to videos!
– our feed
– join us on facebook
– our group in Google+

Apart from text editors or documentation applications, breaking line is not as straight-forward in web pages, as a piece of code is required in the source code for this purpose. The methodology used for this is called “Line Break”.

Follow this step by step easy tutorial to learn how to apply line breaks in CSS and see how to use span tag.

Step 1 – Text within Span tags

First of all, open up the paragraph tag first. After that, let’s open up the Span tag and insert some text in it. With that done, let’s close the Span tag and repeat the process so that we have two lines being displayed on the page.

The code for that would be:

‘span’This is some Text’/span”span’This text is required on Next Line’/span’

Step 2 – Defining the Span Class
With that done, let’s close the paragraph tag and open up the style tag before the body tag,

Now let us define the functionality of the span tag so that it is displayed as a block-level element.

Line break in CSS is done by specifying a display style of element as block, which means that whatever element or text comes in between the span class, it will display that as a separate block, which will be interpreted as line break in viewing.

The code will be:

p span
display: block;

Step 3 – Line Break between texts

It can be observed that line break has appeared between the Lines. This is actually because of that span class which has been discussed in detail in previous step.

And this is how we can use css line break.


Xem thêm bài viết khác:



Please enter your comment!
Please enter your name here