Перетаскивание текста с переполнением текста CSS и раскрытие текста во всплывающем окне

Question

Я слышал, что есть атрибут для отображения содержимого элемента text-overflow:ellipsis во всплывающем окне (похоже на поле комментариев Excel)? Кто-нибудь знает, как достичь этого - я хочу, чтобы он отображал содержимое ячеек в таблице, которая была «эллипсирована», а не для всех элементов, которые вы наводите. Мой код:

td, th { 
    padding: 6px; 
    text-align: left; 
    vertical-align: middle; 
    // word-wrap: break-word; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    img { 
    width: 20px; 
    height: 20px; 
    display: block; 
    } 

} 
td:hover { 
    overflow: visible; 
    // white-space: normal; 
    // word-wrap: break-word; 
} 

Большое спасибо

Answer 1

Если вы не хотите использовать всплывающее окно с Title attribute, насколько я знаю, нет атрибута, как, что вам нужно JS для создания этого выскочит окно.

Если вы хотите использовать название вы можете сделать что-то вроде этого:

table { 
 
    width: 300px; 
 
    table-layout: fixed; 
 
} 
 
table td { 
 
    border: 1px solid red; 
 
    padding: 5px; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
td:before { 
 
    content: attr(title); 
 
}

<table> 
 
    <tr> 
 
    <td title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nemo dolores tempora maiores expedita! Quod consectetur accusamus, enim asperiores quo, fugiat reiciendis quidem atque beatae magnam laborum molestiae quam voluptas!"></td> 
 
    <td title="Quod consectetur accusamus, enim asperiores quo, fugiat reiciendis quidem atque beatae magnam laborum molestiae quam voluptas!"></td> 
 
    </tr> 
 
</table>