Adding plus sign after "..." when using text-overflow

Question

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

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

When clicking the table cell I want the whole text to be shown (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've managed to do that as well.

But I also want to place a + sign after the "..." to show the user that the cell is clickable!

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

How can I do this? I tried using :after but that only added the + after the whole text.

What I've got so far: http://jsfiddle.net/6qLcrswc/1/

Thanks!

Answer 1

You can just set position absolute on your 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>