Отображение обрезанного текста заголовка

Можно ли полностью отобразить обрезанный (overflow: hidden) текст при наведении, чтобы он был читаемым. Правило как

div:hover {
  overflow: visible;
  background-color: yellow;
}

ведет к тексту, показанному поверх другого, так что ничего нельзя прочитать.

Это трудно объяснить, но легко увидеть: plunker . Изменение размеров не является опцией. Подсказка, конечно, сработает, но я нахожу ее довольно навязчивой.

Побочный вопрос: Как я могу сказать, если данное содержание div полностью показано или обрезано?

1 ответ

  1. Если это возможно, вы можете попробовать изменить свой стиль, как это

    table {
      border-collapse: collapse;
    }
    
    th, td {
      border: 1px solid grey;
      width: 100px;
      height: 36px;
      position: relative;
    }
    
    div {
      width: 100px;
      height: 36px;
      overflow: hidden;
    }
    
    div:hover {
      overflow: visible;
      background-color: yellow;
      position: absolute;
      display:block;
      height: auto;
      top: 0;
      z-index: 2;
    }