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

Question

У меня есть 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?

Answer 1

Лучший ответ, который я нашел: завернуть длинное содержимое TD в таблицу с определением:
' расположение таблиц: исправлено ' Это волшебным образом решит эту проблему.

Убедитесь сами -

<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> 

Answer 2

Я нашел другой способ работы без макет таблицы: исправлено.

Поместите свой контекст в 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>

Answer 3

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

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

Answer 4

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

Answer 5

Здесь описано чистое решение CSS и JavaScript (не требующее jQuery): http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

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

Answer 6

Решение с использованием 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>

Answer 7

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

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