Search code examples
htmlcssflexbox

How can I prevent the text from splitting into two blocks and maintain the correct order when adding tags like <strong>?

The Original Code.

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      This is a testing title to be perform- Important topic to be announce
    </div>
  </a>

  <a>
    .....
  </a>
</div>

And this is how it looks like. enter image description here

When I tying to add or other tag, the text will be mess up, turn into two block. How can I make it have a correct order?

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      This is a testing title to be perform- <strong>Important topic to be announce</strong>
    </div>
  </a>

  <a>
    .....
  </a>
</div>

enter image description here

Solution

  • The reason is you have used display:flex; on the parent in which you are adding <strong>...</strong> element. And your <strong> element is treated as a flex-item now and it splits as per flex properties mentioned. Now there is one parent with two flex-items, your normal text and your <strong> element, that is why it is behaving like this.

    All you need to do is remove display:flex; from the div. Something like this would do it for you.

      <div style="color: #212121; margin-left: 16px;">
      This is a testing title to be perform- <strong>Important topic to be announce</strong>
    </div>