Show Truncated Text Normally, But Show Full Text on Hover

Showing truncated text on hover using CSS ellipsis overlaps text below it

You can just add height:auto to the hover state and it'll work just fine:

JS Fiddle

.name{    width:120px;    color: #0079c1;    height: 2em;     line-height: 1em;     font-size: 20px;    font-weight: 400;    text-overflow: ellipsis;    margin-bottom: 12px;    cursor: pointer;    word-break: break-all;    overflow:hidden;    white-space: nowrap;}.name:hover{    overflow: visible;     white-space: normal;    height:auto;  /* just added this line */}

<p class="name">Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum</p><span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.</span>

Show truncated text normally, but show full text on hover

The CSS below will cause the div to "cover" everything below it so it doesn't push any content down.

position: absolute;
background-color:#FFF;

The background color is important so you can't see the stuff below.

To make sure everything stays in the same place, you can give the next element a top margin of the same value as the line height. The + sign is the adjacent sibling selector.

div {
    line-height: 20px;
}
#data:hover+div {
    margin-top:20px;
}

DEMO

HTML table cut off long text and show full text on hover/click

Can you add this code snippet and tell me if it's working?

tr > td:hover {    overflow: visible;    white-space: unset;}

Truncate long text in each table cell, but show full text in each cell in a row on hover

You don't need jQuery or even JavaScript, just move your :hover pseudo class to the tr like so:

tr:hover .test {
    /* These styles will be applied to all 'test's inside a 'tr' that's hovered. */
}

And of course here's a snippet showing it in action:

.test {  width: 100px;  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}
tr:hover .test {  overflow: visible;   white-space: normal;}

<table>  <tr>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>  </tr>  <tr>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>  </tr></table>

Showing on mobile truncate text hidden by hover

On mobile hover works like a click event .

When you click it it will trigger the hover in css.

When you click outside it will hover the blur event.

Check this link
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_fade1

If you want to do it in another way like hover type then you can give the user the eye icon and bind it to the touch event. Yes using the touch start and touch end event listeners you can make the td visible bits data when the user keep pressing the eye icon.
Why eye icon because so that user knows that by touching it the contents will be visible

Check this link.

https://www.w3schools.com/jsref/event_touchstart.asp

Show a toast containing the whole text on hover

.product-details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
}

.product-details:hover + .product-details-full {

  width: 120px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: auto;
  border: 1px solid #000000;
  padding: 15px;
  display: block
}

.product-details-full {
 display: none;}

<div class="product-details">this is a very very long text of course
   
</div>
<div class="product-details-full">this is a very very long text of course
</div>

Truncate the text and show it on mouseover

You can use Jquery Like this :

HTML :

<p>Some Text</p>

JS :

var lengthText = 30;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

$('p').text(shortText);

$('p').hover(function(){
    $(this).text(text);
}, function(){
    $(this).text(shortText);
});

DEMO : http://jsfiddle.net/1yzzbv4b/2/

Or you can also achieve this with css3 property text-overflow:ellipsis;

CSS :

p{
    text-overflow:ellipsis;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
}

p:hover{
    text-overflow:clip;
    width:auto;
    white-space: normal;
}

DEMO : http://jsfiddle.net/1yzzbv4b/

How do I use css to show on hover tool-tips using the same text which is shortend with ellipses?

Can't you just use the title attribute of the span???

<style>.don_single_donatori {  width: 250px;  min-height: 310px;}
.overview span {  text-overflow: ellipsis;  width: 100px;  white-space: nowrap;  overflow: hidden;  display: inline-block;}
.overview em {  font-style: normal;  color: #000;  float: right;}</style><div class="don_single_donatori">    <div class="viewport">        <div class="overview">            <p><span title="This is my full name which should be shortend">            This is my full name which should be shortend            </span><em>2.000,00 EUR</em></p>            <p><span>Anonymous</span><em>2.000,00 EUR</em></p>            <p><span>Anonymous</span><em>500,00 EUR</em></p>            <p><span title="This is another long name that needs shortening">            This is another long name that needs shortening            </span><em>2.000,00 EUR</em></p>            <p>Anonymous<em>2.000,00 EUR</em></p>        </div>    </div></div>

Show remaining Text on hover

Change Like This:

.show:hover {
   overflow: visible;
   white-space: normal;
   height: auto;
}

Full Code:

.show {  padding: 5px 5px 5px 5px; border-radius: 10px; height: 20px; margin: 5px 1% 5px 1%; position: relative; transition: height 0.5s; -webkit-transition: height 0.5s; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; letter-spacing: 1px; line-height: normal; outline: 0 none; text-decoration: none; text-transform: uppercase;}.show:hover {overflow: visible;white-space: normal;height: auto;}

<div class="show">    To get text to flow around an image, you need to use the float property, which takes an element out of thenormal flow of the document and moves it to one side to make room for whatever follows. So, if you float animage to the left, the following text flows into the empty space created on the right. The same happens with blocklevelelements. When you float a block-level element, as long as there’s sufficient space alongside the floatedblock, the following elements are no longer forced onto a new line, and they can move up.</div>

---

Related Topics