Hey there! I have a table that contains some text and I'm looking to shorten the text after it reaches a certain length. I was able to achieve this using the text-overflow property.
.overflow {
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Now, when I click on a table cell, I'd like the entire text to show by adjusting the row height, as demonstrated below:
+------------------+ +------------------+
| Header | | Header |
+------------------+ +------------------+
| First text block | --> | First text block |
+------------------+ +------------------+
| A long text b... | | A long text |
+------------------+ | block |
^click +------------------+
I've already managed to make that work successfully!
However, I also want to add a "+" sign after the "..." to indicate to users that they can click on the cell. Here's an example of what I'd like to achieve:
+--------------------+
| Header |
+--------------------+
| First text block |
+--------------------+
| A long text b... + |
+--------------------+
Any suggestions on how I could accomplish this? I tried using :after, but it only added the "+" after the entire text.
Here's where I'm at currently: http://jsfiddle.net/6qLcrswc/1/
Thanks for your help!