Add a plus sign after "..." when using text overflow

Question

So, I have a table with some text, and I want to truncate the text by a certain length. I achieved this using text-overflow .

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

When I click on a table cell, I want all the text to be displayed (by changing the height of the row). Like this:

 +------------------+ +------------------+ | Header | | Header | +------------------+ +------------------+ | First text block | --> | First text block | +------------------+ +------------------+ | A long text b... | | A long text | +------------------+ | block | ^click +------------------+ 

I also managed to do this.

But I also want to put the + sign after "..." to show the user that the cell is interactive!

 +--------------------+ | Header | +--------------------+ | First text block | +--------------------+ | A long text b... + | +--------------------+ 

How can i do this? I tried using :after , but added only text + after all the text.

What I still have: http://jsfiddle.net/6qLcrswc/1/

Thanks!

Answer 1

You can simply set the absolute position in the pseudo-element:

 $(".overflow").click(function() { $(this).toggleClass("overflow"); }); 

 table, td { border: 1px solid black; } td { width: 70px; } td .overflow { width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; } div { position: relative; } div::after { position: absolute; content: " +"; bottom: 0; right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <div class="overflow">A long textfield</div> </td> </tr> <tr> <td> <div class="overflow">Another long textfield</div> </td> </tr> <tr> <td> <div class="overflow">The third long textfield</div> </td> </tr> </table> 

Answer 2

I advise you to use the cursor: pointer; to show the user that the cell is interactive. To put a “+” after this, you can do this installation position: relative; for div and absolute for :: after pseudo-selector and control with right and top.

UPDATE: Just as Mehdi wrote