Закрепите длинный текст внутри ячеек таблицы HTML, покажите весь контент при наведении

У меня есть таблица html таблицы, которая имеет столбец с именем "адрес". Адрес содержит очень длинные строки. Я хочу показать только первые 2 или 3 слова адреса, и когда я наведу на него курсор, он должен показать полный адрес. Как я могу сделать это с помощью таблицы html?

10
css html html-table overflow

3 ответов

.adress {
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
}

.adress:hover {
  max-width : initial; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <td>
        <strong>ID</strong>
      </td>
      <td>
        <strong>Adress</strong>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td class="adress">
        A very, very long adress that cannot be showed entirely
      </td>
    </tr>
  </tbody>
</table>

вы можете начать оттуда, это пример того, как использовать max-width в сочетании с overflow : hidden.

Pass наведите указатель мыши на ячейку адреса, чтобы увидеть результат

7

устранение:

  • использовать table-layout: fixed чтобы столбцы таблицы поддерживали фиксированный размер
  • оберните содержимое внутри элементов div и управляйте свойствами ширины и переполнения

/*
 * fixed table layout
 */
table {
  font: larger sans-serif;
  table-layout: fixed;
  width: 500px;
}
th:nth-child(1) {
  width: 20%;
}
th:nth-child(3) {
  width: 20%;
}

/*
 * width and overflow
 * inline-block elements expand as much as content
 * relative position makes z-index work
 * explicit width and nowrap makes overflow work
 */
div {
  display: inline-block;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * higher z-index brings element to front
 * auto width cancels the overflow
 */
div:hover {
  z-index: 1;
  width: auto;
  background-color: #FFFFCC;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div>Johm Smith</div></td>
      <td><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
      <td><div>1-234-567890</div></td>
    </tr>
    <tr>
      <td><div>Jane Doe</div></td>
      <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
      <td><div>1-234-567890</div></td>
    </tr>
  </tbody>
</table>
9

используя Tootips дает решение,

<html>
  <table border="1" >
    <tr>
      <td>A</td>
      <td><abbr title="Ab df df dfdf df dfdkjf sdfk dfdf">Ab df df</abbr> </td>
    </tr>
    <tr>
      <td>B</td>
      <td><abbr title="Bb df df dfdf df dfdkjf sdfk dfdf">Bb df df</abbr> </td>
    </tr>
  </table>
</html>
3