Почему эллипсис CSS не работает в ячейке таблицы?

Рассмотрим следующий пример: (живая демонстрация здесь)

$(function() {
  console.log("width = " + $("td").width());
});
td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Qaru</td>
    </tr>
  </tbody>
</table>

Ответы

Ответ 1

По-видимому, добавив:

td {
  display: block; /* or inline-block */
}

также решает проблему.

Другим возможным решением является установка table-layout: fixed; для таблицы, а также установка width. Например: http://jsfiddle.net/fd3Zx/5/

Ответ 2

Также важно поставить

table-layout:fixed;

К содержащейся таблице, поэтому он хорошо работает в IE9 (если вы используете max-width).

Ответ 3

Как уже говорилось, вы можете использовать td { display: block; }, но это побеждает цель использования таблицы.

Вы можете использовать table { table-layout: fixed; }, но, возможно, вы хотите, чтобы он вел себя по-разному для некоторых колонок.

Итак, лучший способ добиться того, что вы хотите, - это обернуть текст в <div> и применить свой CSS к <div> (а не к <td>) следующим образом:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Ответ 4

Попробуйте использовать max-width вместо width, таблица все равно будет автоматически рассчитывать ширину.

Работает даже в ie11 (с режимом совместимости ie8).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Qaru</td>
    </tr>
    <tr>
      <td>Hello Qaru</td>
    </tr>
    <tr>
      <td>Hello Qaru</td>
    </tr>
  </tbody>
</table>

Ответ 5

Демо-страница

Для таблиц с динамической шириной я нашел следующий способ получения удовлетворительных результатов. Каждый <th>, который должен иметь возможность обрезки текста, должен иметь внутренний оберточный элемент, который оборачивает содержимое <th>, позволяющего text-overflow работать.

The real trick is to set max-width (on the <th>) in vw units.

Это эффективно приведет к тому, что ширина элемента будет "привязана" к ширине области просмотра (окно браузера) и приведет к отзывчивому контенту. Установите единицы измерения vw на требуемое значение.

Минимальный CSS:

th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Вот работающая демонстрация:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Ответ 6

Просто предлагая альтернативу, поскольку у меня была эта проблема, и ни один из других ответов здесь не имел желаемого эффекта, который я хотел. Поэтому вместо этого я использовал список. Теперь семантически информация, которую я выводил, можно было бы рассматривать как как табличные данные, так и перечисленные данные.

Итак, в конце концов, я сделал это:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Итак, в основном ul есть table, li есть tr, а span - td.

Затем в CSS я устанавливаю span элементы display:block; и float:left; (я предпочитаю эту комбинацию для inline-block, поскольку она будет работать в более старых версиях IE, чтобы очистить эффект float, см.: http://css-tricks.com/snippets/css/clear-fix/) и также иметь эллипсы:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Затем все, что вы делаете, устанавливает max-widths ваших интервалов, и это даст списку вид таблицы.

Ответ 7

Вместо того, чтобы использовать многоточие для решения проблемы переполнения текста, я обнаружил, что вход с отключенным и стилизованным интерфейсом выглядел лучше и все еще позволяет пользователю просматривать и выбирать всю строку, если это необходимо.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Похоже на текстовое поле, но с подсветкой, поэтому он более удобен для пользователя

Ответ 8

Проверьте box-sizing свойство css ваших элементов td. У меня возникла проблема с шаблоном css, который устанавливает значение border-box. Вам нужно установить box-sizing: content-box.

Ответ 9

Оставь свои столы такими, какие они есть. Просто оберните содержимое внутри TD с помощью span, к которому применено усечение CSS.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Ответ 10

Если вы не хотите устанавливать max-width в td (например, в этот ответ), вы можете установить max-width для div:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Примечание: 100% не работает, но 99% делает трюк в FF. Другим современным браузерам не нужны глупые div-хаки.

td {
  border: 1px solid black;
    padding-left:5px;
    padding-right:5px;
}
td>div{
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}