A cool CSS trick to achieve line break.

We all are familiar with <br/> tag in HTML . As we know HTML should be about content and CSS  about display , and if we prefer to keep it that way we should definitely try CSS alternatives for <br/> tag.  To achieve such a line break there is a cool CSS trick.

Suppose content which comes after the line break is within a ‘div’ element having class name as ‘class-name’ .Within your CSS file add the following lines in order to achieve line break.

.class-name :  before {
content :    ‘\a’ ;
white-space :    pre ;
}

And voila! Line break is achieved.. 🙂

Advertisements

One thought on “A cool CSS trick to achieve line break.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s