Clever Geek Handbook

Offset the first line of a paragraph

Html

<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
Run code


With the above code, is it possible to get the following output with the text stacked line by line in the right position with the same number from the paragraph number?

first line of paragraph is offset to the left

+3


source to share


3 answers


If you can remove the tag br

, you can achieve this with a property text-indent

(more on MDN )

p {
  margin-left: 2em;
  text-indent: -1.5em;
}
      

        
        
        
      

    
<p>1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
Run code


If you can't edit the HTML, a workaround would be to add display:none;

to the tag <br/>

. You can add spacing between paragraphs with padding-top

and offset the first line with a negative value text-indent

:



br {
  display: none;
}
p {
  padding-top:1.2em;
  margin-left: 2em;
  text-indent: -1.5em;
}
      

        
        
        
      

    
<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
Run code


Note that I used units em

to offset the first row from the left. It will adapt to the font size, but will need to be adjusted according to the font you are using.

+5


source


No, it is not, since there is no pseudo-selector :first-word

, but this is easily possible if you slightly change the HTML structure:

<p><br /><span>1.2</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br /><span>1.3</span> text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text </p>
<p><br /><span>1.4</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

CSS



p {
    line-height: 1.25em;
    padding-left: 2em;
    position: relative;
    text-align: justify;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 2em;
}
p > br:first-child + span {
    top: 1.25em; /* this fixes position in case the <p> starts with a <br/> */
}

https://jsfiddle.net/bfa4w3nu/2/

+2


source


CSS3

li {
    text-align: justify;
    word-wrap: break-word;
}
-1


source






More articles:


All Articles