Solved

Text Formatting Div's and Class's

Posted on 2014-04-01
4
268 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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).

867 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

21 Experts available now in Live!

Get 1:1 Help Now