CODEWITHSUNDEEP
css
user1887288
user1887288

Reputation: 35

Css text paragraph align

i want to display text where text begins first line for second line also, but it is going left side under numbers pls help

1 Text line paragraph and and
and and and and and and and and and and
2 Text line paragraph and and
and and and and and and and and and and
3 Text line paragraph and and
and and and and and and and and and and

Note: without using list class i want this type of display text with css please help.

Upvotes: 0

Views: 1146

Answers (5)

dxc
dxc

Reputation: 1051

If it's just the indentation you are after you could just do this:

p {
  padding-left: 1em;
  text-indent: -0.75em;
}

Depending on font you may have to adjust the text-indent value a bit.

http://jsfiddle.net/h7KvC/

Upvotes: 1

Ladineko
Ladineko

Reputation: 1981

Make a ol out of it..

<ol>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>

Result :

  1. Text line paragraph and and
    and and and and and and and and and and
  2. Text line paragraph and and
    and and and and and and and and and and
  3. Text line paragraph and and
    and and and and and and and and and and

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

I assume you mean that for text consisting of numbered items where the numbers are part of the content, each item should start on a new line and the second and subsequent lines of an item should be left-aligned to the same point where the text proper (after number, period, and space) of the first line starts. I also assume that “without using list class” means that the element for a numbered list, ol, must not be used, for some reason.

The simplest (and most robust) solution is then to use a table. Example:

<style>
table.list { border-collapse: collapse; }
table.list td { padding: 0; vertical-align: top; }
table.list td:first-child { text-align: right; padding-right: 0.25em; }
</style>
<table class=list>
<tr><td>1.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
<tr><td>2.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
<tr><td>3.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
</table>

If you need avoid using table markup, then you need to simulate it somehow, e.g. using div and span markup and CSS table formatting (display: table etc.) – works in modern browsers, but not in old versions of IE.

Live Demo

Upvotes: 2

dxc
dxc

Reputation: 1051

You can make paragraphs into list items in this way:

HTML

<div class="list">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p>Paragraph three</p>
</div>

CSS

.list {
  counter-reset: pcount;
}
.list p:before {
  counter-increment: pcount;
  content: counter(pcount, decimal) ' ';
}

Result

1 Paragraph one
2 Paragraph two
3 Paragraph three

http://jsfiddle.net/bQWau/1/

Upvotes: -1

Gopikrishna
Gopikrishna

Reputation: 857

Use text-indent and clear both in css hope it will solve your issue.

Upvotes: 0

Related Questions