How to format text using CSS

Question

I was wondering how can align my text so it will display the way I want it to. Can someone help me display the text like it is in example 2 using CSS?

Here is what my text is doing.

Name: At vero eos et 
accusamus et iusto odio dignissimos d

Here is what I want it do.

Name: At vero eos et 
      accusamus et iusto odio dignissimos d

HTML markup.

<div><p><span>Name:</span> At vero eos et 
      accusamus et iusto odio dignissimos d</p></div>

What is the HTML markup? CSS is not a text formatting language. What you want is possible, but depends greatly on the HTML markup. — Jason McCreary
– Jason McCreary, Commented Jul 23, 2010 at 3:42
can you re-mark-up your HTML? e.g. <div class="passage"><div class="name">Name:</div><div class="dialogue">At vero eos et <br /> accusamus et iusto odio dignissimos d</div></div> — ina
– ina, Commented Jul 23, 2010 at 3:56
assigning classes - useful if you use div and span for other uses than name/dialogue on the page. assuming that you will only have dialogue structured like above on the page, my answer below will format all div's and span's in the same way. — ina
– ina, Commented Jul 23, 2010 at 4:08

ina · Accepted Answer · 2010-07-23 04:02:03Z

1

<style>
div{
  font-family:"Courier New", Courier, monospace;
  margin-left: 65px;
}
span{
  margin-left: -65px;
} 
</style>

Hopefully you can put a <br /> at the end of each linebreak. If you have PHP, you can use nl2br()

You can see the results and code @ http://jsfiddle.net/Sghym/

answered Jul 23, 2010 at 4:02

ina

19.6k42 gold badges128 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to format text using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related