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


150

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

$(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и многоточие не появляется.

Что мне здесь не хватает?



Каким-то образом дублирует, но ответ не дает обходного пути (как это делает Арлен Кусс).
Флориан Маргэйн

1
widthи heightна ячейках таблицы всегда используются минимальные ширина и высота. Ячейки таблицы разные!
Мистер Листер

1
@FlorianMargaine На самом деле, другой вопрос предоставляет обходной путь: поместите div в ячейку с желаемой шириной.
Мистер Листер

Я все еще предпочитаю ответы, перечисленные на этой странице как бы то ни было.
Флориан Маргэйн

Ответы:


102

Видимо, добавив:

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

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


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


4
Именно. Элементы с display: table-cell(по умолчанию для tdэлементов) не принимают ширину.
Майкл Миор

29
display: block;своего рода побеждает цель использования стола. Мне нравится этот table-layout: fixed;вариант, он хорошо сработал для меня.
Алекс К

7
table-layout:fixedраспределяет ширину столбцов менее умным способом. Есть ли другая опция, которая будет назначать ширину столбца таким же образом, table-layout: normalи при этом правильно отображать многоточие?
Гнездо

Это винты с границей стола; использование max-width не делает.
Чарли

85

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

table-layout:fixed;

Что касается таблицы, то она хорошо работает и в IE9 (если вы используете max-width).


7
это также гарантирует, что переполнение текста работает в адаптивных макетах
jao

3
Это именно то, что мне было нужно. У меня ширина стола 100%. И все столбцы, кроме одного с фиксированной шириной. Это позволяет последнему столбцу занимать столько места, сколько осталось.
matthew_360

78

Как было сказано ранее, вы можете использовать, 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;
}

2
Это самый простой метод, который я видел, и он действительно работает в IE8.
Кит Кеттерер

2
Это на самом деле лучшее решение, которое я видел на многоточии в таблицах.
Члены от

41

Попробуйте использовать 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 .


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

Способ лучше, чем отображение взлома; винты displayhack с границей стола.
Чарли

21

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

Для таблиц с динамической шириной я нашел следующий способ получения удовлетворительных результатов. Каждый, <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>


3

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

В итоге я сделал следующее:

<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, чтобы очистить эффект с плавающей запятой, см .: 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интервалы, и это придаст списку вид таблицы.


Можете ли вы применить ul внутри тд (например <td><ul>...</ul></td>)? Кажется, это не работает для меня :(
Сэм

2

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

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

Выглядит как текстовое поле, но выделяется цветом, поэтому удобнее для пользователя


2
Это не удобно для пользователя, потому что при использовании вспомогательных технологий это неправильно воспринимается как ввод, и поэтому пользователь думает, что он может что-то ввести. Неверно использовать семантику элементов.
Карло

О боже, это так умно! так как это часть таблицы, просто установите ввод без полей с прозрачным фоном. Я люблю это решение!
Сэм

1

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


0

Оставь свои столы такими, какие они есть. Просто оберните содержимое внутри 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's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Я попробовал это, это не работает на DataTables.net. любая идея?
Сэм

-2

Если вы не хотите устанавливать 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.

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

}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.