Контроль переполнения элемента TD

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

<table width="100%" border="3">
<tr>
<td ><span style="white-space: nowrap; overflow: hidden; 
 text-overflow: ellipsis;" >
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</span></td>
</table>

Можно ли заставить браузер IE отображать эллипсис, даже не определяя элемент "span" с абсолютной шириной, например: width = 300px?

Ответ 1

Лучший ответ, который я нашел: обертывание длинного содержимого TD в таблицу с помощью определения: table-layout: fixed. Это волшебное решение этой проблемы.

Смотрите сами -

<table width="100%" border="3">
<tr> <td>
<TABLE width=100% cellpadding=0 cellspacing=0 style='table-layout:fixed'><TR>
<TD style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</TD></TR></TABLE>
</td>
</table>

Ответ 2

Нет! IE не позволяет изменять способ отображения таблицы, поэтому, если вы не используете элемент типа span, текст не будет обрезаться. Если вам нужно наложить многоточие на клип, вы должны использовать элемент типа span или div с абсолютной шириной.

Чтобы автоматически включить его, вы можете использовать JavaScript или переключиться с таблицы на div. Надеюсь, это поможет вам.

Ответ 3

Я нашел, что другой способ работает без table-layout: fixed.

Поместите свой контекст в td, используя атрибут Значение или Заполнитель.

Затем введите стиль Как обычный контекст не может быть изменен.

Это будет работать с истинной гибкой табличной шириной td.

<table>
  <tr>
    <td>
      <input type="text" value="TitleTitleTitleTitle" />
    </td>
    <td>
      <input type="text" placeholder="ValueValueValueValue" />
    </td>
    <td>
      <input type="text" value="NumberNumberNumberNumber" />
    </td>
  </tr>
</table>
<style>
table{
  width: 100%;
}
td{
  input{
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-user-select: none;
    cursor: default;
  }
}
</style>

Ответ 4

Пробовали ли вы использовать -ms-text-overflow?

http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx

Ответ 5

Решение с использованием jQuery...

Примечание: "text-overflow: ellipsis", похоже, не работает в FF4.

Демо: http://jsfiddle.net/vgfDd/1/

$w = $('.setWidth').attr('width');
$('.setWidth').find('span').width($w);

CSS...

table {
    border: 3px solid black;
}

span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML...

<table width="100px" class="setWidth">
    <tr>
        <td>
            <span>
                Here should be very long text: 
                bla bla bla bla bla bla bla
            </span>
        </td>
        <td>
            <span>
                Here should be very long text: 
                bla bla bla bla bla bla bla
            </span>
        </td>
    </tr>
</table>

Ответ 6

Здесь описывается чистый CSS и JavaScript (без необходимости использования jQuery): http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

Но вам нужно будет обернуть контент по одному из комментариев Vismari выше.

Ответ 7

Вы должны использовать <table width="inherit">, чтобы он наследовал свою ширину от родительского элемента.