6

First, I know there are a few topics about this out there, but nothing worked for me. I tried the following:

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

-Clip long text inside HTML table cells, show entire content on hover

-And a few solutions I figured out myself.

But none of them worked, so here I am.

I am trying to make a HTML/CSS table, which can contain long text, but it's cut off when the text is longer than the cell is width. I have set the width in my code. But, when you hover over/click on the text (doesn't matter what), the text should be shown full and the table line can also get higher for this.

My code: JSFIDDLE: https://jsfiddle.net/bcuhtvdm/

index.php: (relevant code)

        <table>
            <tr>
                <th class="t1">Lorem</th>
                <th class="t2">ipsum</th>
                <th class="t3">Lorem</th>
                <th class="t4">ipsum</th>
                <th class="t5">Lorem</th>
                <th class="t6">ipsum</th>
                <th class="t7">Lorem</th>
                <th class="t8">ipsum</th>
                <th class="t9edit"></th>
            </tr>

            <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum dolor sedum</td>
                <td>sadipscing elitr</td>
                <td>clita kasd</td>
                <td>clita kasd</td>
                <td>diam voluptuabcdefghijklmnopqrstuvwxyz</td>
                <td>sed diam</td>
                <td>sanctus est</td>
                <td>&nbsp;<i class="fas fa-edit fa-lg"></i>&nbsp;&nbsp;&nbsp;<i class="fas fa-trash fa-lg"></i></td>
            </tr>
            <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum dolor sedum</td>
                <td>sadipscing elitr</td>
                <td>clita kasd</td>
                <td>clita kasd</td>
                <td>diam voluptua</td>
                <td>sed diam</td>
                <td>sanctus est</td>
                <td>&nbsp;<i class="fas fa-edit fa-lg"></i>&nbsp;&nbsp;&nbsp;<i class="fas fa-trash fa-lg"></i></td>
            </tr>
</table>

main.css: (relevant code)

table {
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 0 0;
  table-layout: fixed;
}
table td, table th {
  height: 50px;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  word-break: break-all;
  white-space: nowrap;
  border: 1px solid #C8C8C8;
  text-align: left;
  padding: 10px;
}
table tr:nth-child(even) {
  background-color: #E8E8E8;
}
table tr:hover {
  background-color: yellowgreen;
  overflow: visible;
  white-space: normal;
  height: auto;
}
table .t1 {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
}
table .t1:hover {
  width: 10%;
}
table .t2 {
  width: 20%;
}
table .t2:hover {
  width: 20%;
}
table .t3 {
  width: 10%;
}
table .t4 {
  width: 10%;
}
table .t4 {
  width: 11%;
}
table .t5 {
  width: 8%;
}
table .t6 {
  width: 9%;
}
table .t7 {
  width: 11%;
}
table .t8 {
  width: 15%;
}

How my page looks at the moment: (relevant part)

enter image description here

I hope you understand my problem and someone can help me.

Thanks :)

janisch
  • 159
  • 1
  • 1
  • 13

4 Answers4

7

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

tr > td:hover {
    overflow: visible;
    white-space: unset;
}
Rasidre
  • 333
  • 2
  • 10
  • yes, it is!! Thank you! But now it only activates itself when I hover over the cell, but I would like it to activate when I hover over the row. Is that possible? – janisch Dec 11 '19 at 13:12
  • Of course, just change the order of the selector: "tr:hover > td" – Rasidre Dec 11 '19 at 13:14
  • perfect, thank you! Could you try to explain it a bit, because I also want to understand the code I write, and I've really no clue what your codes does. – janisch Dec 11 '19 at 13:16
  • I will try: overflow: visible tells the browser to show the element even if it leaves its bounds. So the full text will be shown. white-space: unset will reset your nowrap. So the text will break if it has no space anymore – Rasidre Dec 11 '19 at 13:55
  • If you hover a tr-tag - the td child elements of this tr will change to { and then your changes } – Rasidre Dec 12 '19 at 11:10
4

Displaying long text in tooltip on hover

   <style>
    .longTextCss {
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
        max-width:1px;
    }
    abbr[title] {
        text-decoration: none;
    }
    </style>
    
    <table>
        <thead>
            <th>Long Text</th>
        </thead>
        <tbody>
            <tr>
                <td class="longTextCss"><abbr title="Very long text to display">Very long text to display</abbr></td>
            </tr>
        </tbody>
    </table>

enter image description here

Tirtha
  • 89
  • 9
  • Code only answers can generally be improved by adding some explanation of how and why they work. – Jason Aller Aug 20 '20 at 18:45
  • @Jason Aller - Point well taken. Have added a line description on the approach. And the code is simple and self explanatory. Please let me know if you feel it can be more improvised. Thank you for your comment. – Tirtha Aug 21 '20 at 19:54
2

I've exchanged the table .th:hover with table .td:hover. It seems to work.

table td:hover {
  background-color: yellowgreen;
  overflow: visible;
  white-space: normal;
  height: auto;
}
Maryam Heydarian
  • 156
  • 13
  • Yes, that worked! Can't believe it was so simple. But isn't it possible to activate it when I hover over the row and not only over the cell? – janisch Dec 11 '19 at 13:14
1

You can use text-overflow property

table tr:hover td {
    text-overflow: initial;
    white-space: normal;
}
Samir Munjewar
  • 69
  • 4