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

Questions

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

byMR

May 23, 2023

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.

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>

>Solution :

The reason is you have used display:flex; on the parent in which you are adding ... element. And you  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, you normal text and your  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>