HTML (With a little php) - Can't maintain indent of text on wrapping text

Question

Welcome To Ask or Share your Answers For Others

HTML (With a little php) - Can't maintain indent of text on wrapping text

posted Feb 19, 2021 in Technique[技术] by 深蓝 (71.8m points)

HTML (With a little php) - Can't maintain indent of text on wrapping text

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;
}

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-02-19T04:05:09+0000

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>

Categories

HTML (With a little php) - Can't maintain indent of text on wrapping text

HTML (With a little php) - Can't maintain indent of text on wrapping text

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags