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

Html – Stop text with negative text-indent from going over the float element

I want to stop text going over the yellow box, and go into line below it.
I assume this happens because the indent is bigger than the first word, but is there a trick to make it entire paragraph go below the yellow line (without changing display to flex, or grid, etc. which would stop it from flowing altogether)

.myfloat {
  float: left;
  width: 420px;
  height: 100px;
  background: yellow;
}

.hanging-indent {
  text-indent: -20px; /* Negative value to indent the first line to the left */
  margin-left: 20px; /* Positive value to offset subsequent lines */
  width: 400px;
}
<div class="myfloat">
</div>

<p class="hanging-indent">
    L ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.    Lo ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.
</p>
Tags:

2

Answers


  1. 0

    This may not be ideal for whatever your needs are, but the real issue is with the float. If you can just clear your float before the text then you are good to go.

    .myfloat {
  float: left;
  width: 420px;
  height: 100px;
  background: yellow;
}

.clear { clear: both; }

.hanging-indent {
  text-indent: -20px; /* Negative value to indent the first line to the left */
  margin-left: 20px; /* Positive value to offset subsequent lines */
  width: 400px;
}
    <div class="myfloat">
</div>

<div class="clear"></div>

<p class="hanging-indent">
    L ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.    Lo ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.
</p>
    Login or Signup to reply.
  2. 0

    Try using span tag for the indentation in paragraph.

    .myfloat {
  float: left;
  width: 420px;
  height: 100px;
  background: yellow;
}

.hanging-indent {
  width: 400px;
}
    <div class="myfloat">
</div>

<p class="hanging-indent">
    <span style="width:20px;display: inline-block;"></span>
    L ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.    Lo ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search