Чому еліпсис 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 Stack Overflow</td>
    </tr>
  </tbody>
</table>

Вихід:, width = 139і еліпсис не з’являється.

Що я тут пропускаю?

Мабуть, додавши:

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

вирішує і проблему.

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

Це також важливо поставити

table-layout:fixed;

На таблицю, що містить, тому вона добре працює в IE9 (якщо ви використовуєте максимальну ширину).

Як було сказано раніше, ви можете використовувати, 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;
}

Спробуйте використовувати 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 Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

Демонстраційна сторінка

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

Справжня хитрість - встановити max-width(на <th>) в vwодиницях .

Це ефективно призведе до того, що ширина елемента буде "прив'язана" до ширини вікна перегляду (вікно веб-переглядача) і призведе до чуйного відсікання вмісту. Встановіть 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>

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

Отже, зрештою, я і зробив:

<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- виправити / ) і також мати еліпси:

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

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

Тоді все, що ви робите, - це встановити розмір max-widthsваших прольотів, і це додасть списку вигляд таблиці.

Замість того, щоб використовувати еліпсис для вирішення проблеми переповнення тексту, я виявив, що вимкнутий та стилізований вклад виглядав краще і все ще дозволяє користувачеві переглядати та вибирати весь рядок, якщо це потрібно.

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

Це схоже на текстове поле, але воно може бути виділене, тому зручніше для користувачів

Перевірте box-sizingвластивість css своїх tdелементів. У мене виникла проблема з шаблоном css, який встановлює його border-boxзначення. Вам потрібно встановити box-sizing: content-box.

Залиште свої столи такі, які вони є. Просто загортайте вміст всередині TD-коду за допомогою проміжку, на якому застосовано 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's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Якщо ви не хочете встановити 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. Іншим сучасним браузерам не потрібні нерозумні дикі хаки.

td {
  облямівка: 1px суцільний чорний;
    підкладка-зліва: 5px;
    підкладка-права: 5px;
}
td> div {
    максимальна ширина: 99%;
    переповнення: приховано;
    переповнення тексту: еліпсис;
    пробіл: nowrap;

}