Solved

Text Formatting Div's and Class's

Posted on 2014-04-01
4
267 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
Comment Utility
They're using the "<pre>" tag.
It preserves whitespace and line breaks.
0
 
LVL 57

Author Comment

by:Pete Long
Comment Utility
OK - Can that be applied via a class?

Or is it a stand alone element?

P
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
ust html in ms/access WebBrowswer 11 41
FTP File permissions 1 27
work allocation; web development; vba; access; 4 46
modify h2 4 8
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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

12 Experts available now in Live!

Get 1:1 Help Now