0

My HTML/CSS task seems white simple: I need a number (variable length) before a multi-line paragraph and the text shall have an indention, so the second line starts at the same position as the first line:

1. This is text in
   two lines

10. This is another
    text in two lines

If I knew the necessary indention, this would be an easy task using CSS:

<p style="padding-left: 14px; text-indent: -14px">1. This is text in two lines</p>

Yet, I do now know and my goal is to have a dynamic indention (without using JavaScript). The reason: The paragraphs are on different webpages and having lots of space on page 1 is not very beautiful.

One possible solution would be a table construction (via <table> or CSS-tabled DIVs), but one table construction for each paragraph probably is oversized.

Another possible solution would be a floating DIV for the number ... but I do not know the height of the text.

<div style="float: left; width: 1px; height: ?; overflow: visible">1.</div>
This is text in two lines

Therefore, I am looking for a more elegant solution to solve this, using HTML and CSS. Thank you for your ideas!

BurninLeo

BurninLeo
  • 4,240
  • 4
  • 39
  • 56
  • Have you tried organized lists?
    1. Text1
    2. Text2
     – Ricardo Castañeda Jan 05 '15 at 23:21
  • Thanks! I had considered that, but lists (a) use a predefined width for the number, as well, and (b) my paragraphs are on different pages (with other content between), so there would be a new `
      ` for each such paragraph. That would be quite a misuse of `
        `.
     – BurninLeo Jan 05 '15 at 23:25
  • Anybody voting down a question is invited to leave a comment on the reason(s). Thanks. – BurninLeo Jan 06 '15 at 14:21

2 Answers2

2

Example here: jsfiddle

<!-- html -->
<div style="float: left">1.</div>
<p>Phasellus lacinia ipsum quis dolor faucibus interdum.</p>

/* css */
p {overflow: hidden}
Ricardo Castañeda
  • 5,746
  • 6
  • 28
  • 41
  • The number will be created by a PHP script in the background. I am looking for a HTML/CSS solution for the indention of line 2 (with a dynamic indent, depending on the number's width). – BurninLeo Jan 05 '15 at 23:29
  • 1
    And now? http://jsfiddle.net/qws4skjb/2/ I added width to paragraph just for example. I am using the number inside floated div. – Ricardo Castañeda Jan 05 '15 at 23:36
  • That's cool! I have played with the fiddle a bit: http://jsfiddle.net/qws4skjb/8/ ... Why does the `overflow: hidden` break the default float-behavior? – BurninLeo Jan 06 '15 at 14:19
  • Ah - found the answer about the "overflow": http://stackoverflow.com/questions/16041229/css-overflowhidden-with-floats - would you mind, editing your answer, so I can mark it as *the* answer? – BurninLeo Jan 06 '15 at 14:27
  • A not for others who search a similar solution: Set no width for the `

    ` to use the max. available width. Placing multiple paragraphs inside a `

    ` (right of the number) also works fine (http://jsfiddle.net/qws4skjb/8/).
     – BurninLeo Jan 06 '15 at 16:53
  • Yep, I removed width, it is optional. By the way, you can generate random paragraphs in http://es.lipsum.com/feed/html – Ricardo Castañeda Jan 06 '15 at 17:04
0

Try using

 <ol>
    <li>
      This is text is<br>
      In two lines
    </li>
 </ol>

Example:

  1. This is text is
    In two lines
Dyah Isnaeny
  • 31
  • 2
Martijn Melchers
  • 80
  • 13