Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Text Formatting Div's and Class's

Posted on 2014-04-01
4
Medium Priority
?
277 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 23

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 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 400 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 23

Accepted Solution

by:
Snarf0001 earned 1600 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

Python: Series & Data Frames With Pandas

Learn the basics of Python’s pandas library of series & data frames and how we can use these tools for data manipulation.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

688 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