Offset 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>

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

Offset first line of a paragraph

--------------Solutions-------------

If you can remove the br tag, you can achieve this with the text-indent property (more info 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>

If you can't edit the HTML, a workaround would be to add display:none; to the <br/> tag. You can still add spacing between the paragraphs with padding-top and offset the first line left with a negative text-indent value :

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>

Note that I used em units to offset the first line left. It will adapt to the font size but it will need to be tweaked according to the font you are using.

No, it's not since there is no :first-word pseudo selector, but it's easily possible if you change the HTML structure slightly:

<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/

CSS3

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

Category:html Time:2018-12-06 Views:0
Tags: html css css3 html5

Related post

  • Javascript RegEx to find first line of each paragraph 2011-12-22

    This is probably a simple one but I'm very much a regex novice. I'm looking to select the first line of every paragraph within a textarea on a page using a regular expression. After thinking I was there I have hit a problem. Using http://gskinner.com

  • Change indent in the first line of every paragraph? 2012-09-03

    Does anyone know if you can change the indent of the first line of every paragraph in a Word document already indented by default? I have tried MS help but it has been futile. Thank you. practicalcogitator --------------Solutions------------- Does an

  • How to indent the first line in a paragraph 2013-10-10

    How to make the first line only indented by 2.5cm --------------Solutions------------- To Indent a paragraph to make it stand out from the rest of the document, go to the paragraph tab and press the small arrow, then change the indentation by the amo

  • Is it possible to be able to indent the first line of a paragraph in OneNote without the entire paragraph becoming indented? 2014-05-11

    I am converting myself from Word to OneNote to better organize a chapter book I am writing. I understand that OneNote is not a word processing program, but it is so much more convenient when dealing with multiple chapters, parts, and drafts. I hate h

  • Indent first line of a paragraph 2014-10-03

    I have been very excited waiting for web apps, but now find it may be of no use to me if i cant indent the first line of my paragrahs like i can in the full version. does anyone know if i am missing something, or is there no feature for this in web a

  • How can you tab in the first line of a paragraph of text 2011-04-05

    I have some text that is passed dynamically, but the design of the text requires that the top line is tabbed in, so it looks like this: Stackover flow rules, Stackover flow rules, Stackover flow rules, Stackover flow rules, Stackover flow rules, Coul

  • How to cut off string after the first line in the paragraph 2011-12-08

    I have the string as show below: XXX:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus lacus sed justo faucibus id pellentesque nunc porttitor. Sed venenatis tempor dui, nec mattis dolor ultrices at. Duis suscipit, dolor sed f

  • Indenting only the first line of text in a paragraph? 2011-05-02

    I have several paragraphs that I would like to indent, although only the first lines of these paragraphs. How would I target just the first lines using CSS or HTML? --------------Solutions------------- Use the text-indent property. p { text-indent: 3

  • When typing a paragraph, the first line is correct and the lines thereafter indent. 2013-01-17

    I type the first line of a paragraph and then all the rest of the lines in the paragran indent. When I start a new paragraph it goes to the margin and then all other lines indent. --------------Solutions------------- This behavior is what Word calls

  • Indenting the first line of paragraphs that have already been written. 2013-02-10

    Hello, I am trying to help my grandfather with a Word document question. He is writing a book and used Microsoft Word (we think it's 2003) to write his book. However, he did not indent any of his paragraphs when he was writing and the publishing comp

  • Why won't "!important" override ":first-line"? 2010-02-12

    I am trying to do the tutorial in Chapter 6 of the 2nd edition of "CSS: The Missing Manual", and I've run into an issue I'm trying to understand. I have one style that looks like this: #main p:first-line { color: #999999; font-weight: bold; } Later I

  • Indent only the first line of a UITextView? 2011-02-19

    I'd like to indent the first line of a uitextview, but haven't find a way to do this. I'd think it would be possible since it's a pretty common paragraph behavior.. --------------Solutions------------- Try this, it will insert 4 spaces at the beginni

  • Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable 2011-05-06

    this problem made me scratch my head how to use CSS to make a DIV display only the first line of a multiline content? How can I set a DIV height like one line, but actually holding multiple lines? Can this be done without any javascript? I have to di

  • How to set face for keywords which occur in first line? 2011-05-22

    How do I set face for specified keywords but only ones in first line? For example having this file --- cut here --- hello world <-- this "hello" should have face set hello world <-- while this "hello" should not --- cut here --- only first hell

  • margin set to first line of textView 2011-10-07

    i want to set margin for only first line of TextView (Not first line of each paragraph)?I have used code: SpannableString s = new SpannableString("this is a test"+"\n"+"this is a test"); s.setSpan(new android.text.style.LeadingMarginSpan.Standard(30,

  • Changing the first-line indents on my document 2012-09-19

    In my novel - which people here have so graciously helped me format - I indented the first line of every paragraph with the tab. Now that I see the proof, I realize that's too much. I've selected several paragraphs to see if I can change the first-li

  • First Line Indent - How to change entire document? 2014-05-01

    I have a 300 page document and need to reduce the size of the First Line Indent - please help so I don't have to manually change every paragraph, how do I change the whole document at once? I tried hitting select all, then changing but that doesn't w

  • styling the first line in the last paragraph using css 2011-10-03

    How do i make the first sentence in the last paragraph bold using css? I also want to add extra padding to the top of this last paragraph so that it will wrap around an image. If I increase the padding on the bottom of the floated image, the paragrap

  • How to indent first line of paragraph in outlook.com ? 2012-09-25

    Hi, How to indent first line of paragraph in outlook.com ? In GMail you can simply use the "TAB" key exacly like you would do it in a word document. How can you manage to do this in outlook.com ? I've tried the increase indent but it moves the whole

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 2.061 (s). 14 q(s)