Solved

Text Formatting Div's and Class's

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

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Getting robots.txt Error 9 57
PDF Turn Look 7 38
Displaying Text in Columns in HTML 3 32
Allow the whole div to submit form not just button 2 14
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
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…
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).

710 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