Solution 1 :

The problem is that you are using span which is an inline element.

You also do not need text-indent. It is giving you unexpected results because it only applies to one line of text, it has no effect on the lines that wrap.

You could achieve the desired result using flex like on the following example. I added some background color so you can see how the elements align themselves.

.indent {
  padding-left: 1.5em;
  text-indent: -1.5em;
  background-color: #f8d7da;
}

.do_something {
  background-color: #fff3cd;
}

#flex-container {
  display: flex;
}

#flex-second {
  padding-left: 1em;
  background-color: #d4edda;
}

#x { background-color: #cce5ff; }

#fixed-width-x {
  float: left;
}
<p>Example using flex</p>
<div id="flex-container">
  <div id="x"><strong>X</strong></div>
  <div id="flex-second"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </div>
</div>

<p>Your example below</p>
<main>
  <b class="do_something">X</b> <span class="indent"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </span>
</main>

Problem :

I’ve been on this problem for hours. I’m using PHP to display some HTML. It works, but I can’t maintain the text indent on a long wrapping line of inserted text.

I’ve recreated the issue in HTML with the same issue for your convenience.

<style>
.indent {
    padding-left: 1.5em;
    text-indent:-1.5em;
    }
</style>

<html>
<main>
    <b class="do_something">X</b> <span class="indent"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </span>
</main>
</html>

Now I’ve come close to fixing it using a display block, but alas the block creates a new line in the span and I need to stay on the same line as the X, which is important. I also tried flex but no joy.

Any ideas? Thanks.

Here’s my php, which probably isn’t relevant.


        echo '<b class="do_something">X</b>', str_repeat('&nbsp;', 3);
        echo '<span class = "indent">', nl2br($insert_words), '</span><br>';
        echo '<hr>';

//And my other CSS:

.indent {
    display:block;
    margin-left:25px;
}

Comments

Comment posted by Raul Sauco

span

Comment posted by Raul Sauco

What is your expected result? Do you want all the lines indented at the same level? Your code behaves as expected, the entire element has a

Comment posted by Joel

Hi Raul. I want the text in the span to auto wrap under itself without going under the bold X. So the second line needs an indent as well, without indenting the first line further than where it begins. The code provided shows it goes under the X. Try shrinking your html page if you’re not seeing it. Thanks again.

Comment posted by Joel

Raul. Just wanted to say thank you. You’ve helped a lot.

By