-1

Given two adjacent <p> elements, is it possible using a pure CSS solution to display the second <p> element if text ellipsis is activated on the first one and it's being hovered over?

.container {
  width: 200px;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis + p {
  display: none;
}

.ellipsis:hover + p {
  display: inline-block;
}
<div class="container">
    <p class="ellipsis">Long text that might overflow and produce an ellipsis</p>
    <p>Text that shows on ellipsis hover</p>
</div>

Here's a JsFiddle of the problem if needed

e.g. If the container is set to 400px, hovering over the first <p> element should not display the second <p> element

Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
Shane Callanan
  • 427
  • 3
  • 12
  • What are you trying here? "is it possible using a pure CSS solution to display the second

    element if text ellipsis is activated on the first one and it's being hovered over", "If the container is set to 400px, hovering over the first

    element should not display the second

    element" two opposite statements.

     – André Aug 30 '23 at 11:36
  • If the container width is 400px, then text ellipsis won't be activated and hovering over the first `

    ` element shouldn't display the second one. But given a container width of 200px, then ellipsis will be activated and it should happen.

     – Shane Callanan Aug 30 '23 at 11:38
  • If the point is to show the whole text of the first element, with the second element, you could keep it very simple: Just have one element with ellipsis and on hovering over that element change the text-overflow to normal. – KIKO Software Aug 30 '23 at 11:39
  • You can not create a hover "trigger" that works _only_ when those three dots are hovered, no. – CBroe Aug 30 '23 at 11:41
  • I think you need to use JavaScript to add that functionality. [Here is a solution using JavaScript.](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection) – Md. Rakibul Islam Aug 30 '23 at 11:43
  • Yeah, looks like a JS solution is the only way to go about this. I don't want to display the full text on hover but an entirely separate element. – Shane Callanan Aug 30 '23 at 13:00

1 Answers1

0

Maybe this solution works for you. In this case when you hover the text will be displayed. All you need to achieve this is to make the text wrap on hover, and be displayed in multiple lines white-space: normal;.

.container {
  width: 200px;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis:hover {
  white-space: normal;
}
<div class="container">
    <p class="ellipsis">Long text that might overflow and produce an ellipsis. Text that shows on ellipsis hover.</p>
</div>
André
  • 1,602
  • 2
  • 12
  • 26