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

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



HTML:



<table>

  <tbody>

    <tr><td>Hello Stack Overflow</td></tr>

  </tbody>

</table>


CSS:



td {

  border: 1px solid black;

  width: 50px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}


JS:



$(function() {

  console.log("width = " + $("td").width());

});


выход: width = 139, и многоточие не появляется.



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

1216   9  

9 ответов:

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

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

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

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

93  
2012-04-29 16:49:16

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

table-layout:fixed;

на содержащую таблицу, поэтому она хорошо работает в IE9 (если вы используете максимальную ширину).

70  
2012-10-11 15:05:50

как уже было сказано, вы можете использовать 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;
}
65  
2014-07-03 03:37:34

попробуйте использовать max-width вместо.

31  
2012-04-29 16:11: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>
15  
2016-10-19 22:15:13

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

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

<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 ваших пролетов, и это придаст списку вид таблицы.

3  
2014-11-15 19:04:43

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

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

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

2  
2015-09-03 12:11:02

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

}
0  
2017-05-23 14:47:14

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

0  
2017-05-07 17:48:21

Comments

    Ничего не найдено.
Click here to cancel reply.