Как я могу обрезать длинные тексты в таблице с помощью CSS?

Может ли кто-нибудь привести пример CSS, как создать таблицу, где длинные тексты усекаются до текстов, заканчивающихся "..."?

Вот пример: http://jsfiddle.net/NpABe/

<table>
    <tr>
        <td>aaaa</td>
        <td>ssssssss</td>
        <td>dddddddddddd</td>
    </tr>
    <tr>
        <td>ffffffffffffffff</td>
        <td>gggggggggggggggggggg</td>
        <td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
    </tr>
    <tr>
        <td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
        <td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td>llllllllllllllllllllllllllllllllllll</td>
    </tr>
</table>

Ответ 1

Используйте text-overflow: ellipsis. Вам нужно будет исправить ширину ячеек и предотвратить обертку строк:

td {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

EDIT: на самом деле это не сработает. Кажется, вам нужен контейнер div для применения стилей к:

<table>
  <tr>
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td>
(snip)

И затем:

 td div {
   width: 100px;
   white-space: nowrap;
   overflow: hidden;         
   text-overflow: ellipsis;
 }

EDIT 2 А есть способ, но только если вы используете table-layout: fixed:

table {
  table-layout: fixed;
  width: 100px;
}

td {
  white-space: nowrap;
  overflow: hidden;         /* <- this does seem to be required */
  text-overflow: ellipsis;
}

Ответ 2

Это вариант ответа от @RobAgar, который хорошо работает для меня. Я определяю следующий CSS:

td.item-node {
   max-width: 10em;
}
div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

И HTML выглядит как

<td class="item-note">
   <div class="ellipsis">Really super duper long item note that will truncate</div>
</td>

Таким образом, я могу указать ширину на том, что меня волнует (ячейка таблицы), не повторяя все свойства CSS для переполнения белого пространства для каждой ячейки. Класс на div также дает понять, какова его цель.

Ответ 3

Если вам нужно обрезать текст только для одной строки, используйте этот css:

.truncate-text-one-line{
    width:80%;
    height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

В противном случае используйте script:

function shorten_text(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    document.write(ret);
}

Ответ 4

Это должно быть то, что вам нужно:

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Имейте в виду, что переполнение текста CSS является объявлением CSS3, но поддерживается в IE 6+, WebKit 312.3+ (Safari 1.3 +/Chrome) и Opera 9+ (версии < 10.7 нуждаются в -o-text -версия). Однако, не в Firefox < 7.0.

Чтобы исправить это, вы можете использовать этот плагин jQuery: http://www.bramstein.com/projects/text-overflow/