многоточие переполнения текста в ячейке таблицы не работает в IE8 и IE9

Этот код прекрасно работает во всех браузерах, кроме, конечно, IE8 и IE9. К сожалению, этим конкретным пользователям не разрешено использовать какие-либо другие браузеры в своей среде. Гуглил 3 часа, перепробовал все возможные CSS решения, но не работает. Пожалуйста посоветуй.

table-layout: fixed не будет работать, потому что ячейки таблицы должны иметь определенную ширину.

http://jsfiddle.net/s7va8mLc/1/

http://jsfiddle.net/s7va8mLc/1/embedded/result/ ( для просмотра IE8)

HTML:

<table>
    <tr>
        <th>Test</th>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
    </tr>
</table>

CSS:

table {
    width: 500px;
    border: 1px dotted blue;
}

th {
    width: 250px;
}

td {
    width: 250px;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dotted red;
}

Ожидаемый результат:

Ожидаемый результат

Результат IE8-9:

Результат IE8-9


html css ellipsis
person Alex G    schedule 08.09.2014    source источник
comment
«Не работает» — это не описание проблемы; расскажи нам, что происходит. И объяснить «table-layout: fixed» не получится, потому что ячейки таблицы должны иметь определенную ширину; фиксированный макет таблицы означает, что ячейки имеют определенную ширину, а не расширяются в соответствии с содержимым.   -  person Jukka K. Korpela    schedule 08.09.2014
comment
Просто идея, но вы можете попробовать поместить div шириной 250 пикселей в первую ячейку.   -  person    schedule 20.09.2014
comment
-ms-text-overflow возможно? Возможно, вариант jQuery? Или чистый Javascript вариант?   -  person bishop    schedule 20.09.2014
comment
Согласитесь с @JukkaK.Korpela, не уверен, что понимаю, почему table-layout: fixed; нельзя использовать, поскольку это приведет к результату, который вам нужен.   -  person Hidden Hobbes    schedule 20.09.2014
comment
Я протестировал ваши скрипты в IE с эмуляцией для IE8 и IE9, и они выглядят именно так, как вы хотите.   -  person Danield    schedule 22.09.2014
comment
@Danield Я тоже это обнаружил, но смог увидеть проблему в реальной версии IE8.   -  person Hidden Hobbes    schedule 23.09.2014

Ответы (4)


arrow_upward
4
arrow_downward

Попробуйте это, надеюсь, это поможет (проверено в IE8 изначально).

http://jsfiddle.net/s7va8mLc/7/

http://jsfiddle.net/s7va8mLc/7/embedded/result/

HTML

<table>
 <tr>
    <th>Test</th>
    <td>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    </td>
 </tr>
</table>

CSS

table {
    width: 500px;
    border: 1px dotted blue;
}
th {
    width: 250px;
}
td, span {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    display: block;
    border: 1px dotted red;
}
person knuhol    schedule 23.09.2014
comment
Извините, я не могу использовать теги внутри <td> - person Alex G; 28.09.2014
comment
Почему ты не можешь? Боюсь, это единственный способ сделать это. - person knuhol; 30.09.2014
comment
Принять это только для того, чтобы получить больше очков. Это не то решение, которое я реализовал. - person Alex G; 02.10.2014
comment
Итак, какое решение вы реализовали? - person knuhol; 02.10.2014

arrow_upward
2
arrow_downward

Для получения совместимости с Internet Explorer вам нужно ввести тег вверху следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Теперь запустите это снова, я надеюсь, что это решит вашу проблему.

person muhammad tayyab    schedule 22.09.2014
comment
Это не имеет никакого отношения к моему вопросу. - person Alex G; 28.09.2014
comment
Я проверил ваш код в своем Internet Explorer 8, и он отлично работает после этого тега вверху. - person muhammad tayyab; 29.09.2014
comment
Исправление типа документа часто может решить подобные проблемы, не стоит так торопиться. - person Andrew Plummer; 28.01.2015

arrow_upward
2
arrow_downward

В вашем td поместите тег типа p, span, label и зафиксируйте его ширину немного меньше, чем ширина div. Тогда это сработает.

person Shariq    schedule 22.09.2014

arrow_upward
0
arrow_downward

просто используйте от td width property до 50% вместо тега, он будет работать во всех браузерах, которые я считаю.

проверьте эту скрипту

<table>
    <tr>
        <td  class="text-center" width="50%">Test</td>      
        <td width="50%">
            Lorem ipsum dolor sit amet, ...
        </td>
    </tr>
</table>

.text-center{  
    text-align:center;
    font-weight:bold;
}
person Manjunath Siddappa    schedule 26.09.2014