Solved

Text Formatting Div's and Class's

Posted on 2014-04-01
4
269 Views
Last Modified: 2014-04-02
Quick one, on the terminal output that's shown on  this website here how are they displaying that?

What I mean is, it's formatted with all the spaces properly? If I tried to paste that format into html it would remove all the spaces and cram it over to the left.

I have a div class that I use on my own site, and Id like to be able to render text like that in a div I've applied a class to - how do I do that?

Thanks

Pete
0
Comment
Question by:Pete Long
  • 2
4 Comments
 
LVL 22

Expert Comment

by:Snarf0001
ID: 39969240
They're using the "<pre>" tag.
It preserves whitespace and line breaks.
0
 
LVL 57

Author Comment

by:Pete Long
ID: 39969523
OK - Can that be applied via a class?

Or is it a stand alone element?

P
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 39969732
The <pre> tag is what's keeping the linespace and linebreaks, but all the colouring is applied using normal CSS, such as pre.terminal {}

If you need to apply the same whitespace/breaks, why try and re-invent the wheel using classes - just use the <pre> tag - it what it's there for.
0
 
LVL 22

Accepted Solution

by:
Snarf0001 earned 400 total points
ID: 39970143
If you need to in order to apply it to existing elements, the same thing can be achieved with

.myStyle { white-space:pre; }

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now