0

I have a table, and inside this table I have p tags with some text inside.

If the text is too long, it automatically goes to the next line (that's what I want).

The problem is that I sometimes have some white space on the right side of the text (when it goes on two lines) and I can't get rid of it (see screenshot).

enter image description here

I've tried everything, from margin:0 to justify-content: flex-start, or width: fit-content... I've also tried to give a fix width to the text. Nothing works.

What I want : I want the text to fit its exact content without this white space on the right, so the tooltip is always at the same distance from the text

My code:

<div class="paragraph-container">
  <p>Some random text that goes on two lines</p>
  <span class="tooltip"><%= image_tag("tooltip.png") %></span>
</div>

.paragraph-container {
    display: flex;
    p {
      width: fit-content;
    }
  }

Note : I can't put the tooltip inside the p tag, because in reality it's generated dynamically with a headless CMS, so I only have a variable in my code which later generate the p tag. So if possible I need to solve the problem with CSS without moving anything inside the p tag.

Thanks a lot for your help

Jessicascn
  • 151
  • 1
  • 13
  • 1
    add a snippet of your code that creates this issue. – Omri Attiya Dec 16 '20 at 12:20
  • Your question is clear, and at the same time not very clear. Do you want container `.paragraph-container` to be sized `p`? – s.kuznetsov Dec 16 '20 at 12:35
  • I just want to remove the white space that pushes the tooltip on the right. I don't mind about anything else and if I have to resize paragraph-container I'm ok. But I've tried everything and it does not work... – Jessicascn Dec 16 '20 at 12:38

0 Answers0