Html Question posted in
Some basic documentation can be found here.

Html – How to indent after each <br/> but not on the first line?

I have <div> elements that may contain one or several <br/>, i.e., hard line breaks. I would like the text of the new line after each <br/> to be indented, but the first line of the <div> should not be indented.

I first tried div { text-indent: 2rem each-line; }. This indents the text after each <br/>, but it also indents the first line of the <div>. So I tried to remove the indentation of the first line with div:first-line { text-indent: 0rem; }, but this does not work, apparently because text-indent is not an allowed property on the :first-line pseudo-element. Neither can I use a negative margin or padding on the :first-line pseudo-element, it seems. Is there a way to achieve what I want to achieve?

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat metus turpis, et auctor eros porttitor sed.
  <br/>Sed ornare eget metus in interdum. Nulla ut orci eget eros ullamcorper semper.
  <br/>Aliquam fringilla urna lectus, ac vestibulum diam sodales eget.
</div>

So, in this example, "Sed ornare" and "Aliquam fringilla" should be indented, but not "Lorem ipsum". Here is the CSS I tried:

div { text-indent: 2rem each-line; }
div:first-line { text-indent: 0rem; }

Here is a picture of what I am trying to achieve:

Test

Tags:

3

Answers


  1. 0

    You can use JavaScript to wrap each line after
    in a and then apply the indentation specifically to those spans.

    <div id="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat metus turpis, et auctor eros porttitor sed.
  <br />Sed ornare eget metus in interdum. Nulla ut orci eget eros ullamcorper semper.
  <br />Aliquam fringilla urna lectus, ac vestibulum diam sodales eget.
</div>

<script>
  const div = document.getElementById('text');
  div.innerHTML = div.innerHTML.replace(/<brs*/?>/g, '<br><span class="indented">');
  div.innerHTML = div.innerHTML.replace(/n/g, '</span>');
</script>
    Login or Signup to reply.
  2. 0

    A hacky idea using negative margin but only available on Firefox due to the support of each-line

    .indent {
  text-indent: 2rem each-line;
}
.indent:before {
  content:"";
  margin-right: -2rem;
}

/* fallback to avoid the overflow */
@supports not (text-indent: 2rem each-line) {
  .indent {
    text-indent: 2rem;
  }
}
    <div class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat metus turpis, et auctor eros porttitor sed.
  <br>Sed ornare eget metus in interdum. Nulla ut orci eget eros ullamcorper semper.
  <br>Aliquam fringilla urna lectus, ac vestibulum diam sodales eget.
</div>
    Login or Signup to reply.
  3. 0

    Well, this is something you cannot do reliably with your current HTML structure. I tried to retain your document structure (<div> text <br> more text <br> etc. </div>), but nothing works well, as the <br> element only seems to respond under certain conditions, like setting display: none to remove the line breaks or margin.

    Furthermore, the MDN doc about the Line Break element itself also notes that there is little to do to style it:

    As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.

    What you could do instead, is wrapping the paragraphs in <p> tags, like this:

    <div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat metus turpis, et auctor eros porttitor sed.
    </p>
    <p>
        Sed ornare eget metus in interdum. Nulla ut orci eget eros ullamcorper semper.
    </p>
    <p>
        Aliquam fringilla urna lectus, ac vestibulum diam sodales eget.
    </p>
</div>

    And then apply a style to p:

    div p {
    text-indent: 2rem each-line;
}

div p:first-child {
    text-indent: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search