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

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

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

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

Expected result

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

IE8-9 result

источник

2014-09-08 Alex G

«Не работает» не является описанием проблемы; расскажите нам, что произойдет. И объясните, что «table-layout: fixed» не будет работать, потому что ячейки таблицы должны иметь определенную ширину »; фиксированный формат таблицы * означает *, что ячейки имеют определенную ширину вместо расширения в соответствии с содержимым. –

Просто идея, но вы можете попробовать поставить div в ширину 250 пикселей в первой ячейке. –

['-ms-text-overflow' возможно] (http://mattsnider.com/css-string-truncation-with-ellipsis/)? Возможно параметр [jQuery] (http://dotdotdot.frebsite.nl/)? Или [чистый Javascript] (http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots -via-javascript) – bishop

Попробуйте это, надеюсь, что это поможет (протестировано в 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; 
}

источник

2014-09-23 13:43:39

Извините, я не могу использовать какие-либо тэги внутри '' –

Почему ты не можешь? Боюсь, это единственный способ сделать это. –

Принимая это, чтобы получить больше очков. Это не решение, которое я реализовал. –

Для получения совместимости в Internet Explorer вам нужно тип тега в верхней части, как, что:

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

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

источник

2014-09-22 04:50:48 titanscomputer

Это не имеет никакого отношения к моему вопросу. –

Я проверил ваш код в своем Internet Explorer 8, и он отлично работает после этого тега вверху. – titanscomputer

Фиксирование doctype может часто решать такие проблемы, вы не должны быть настолько поспешными. –

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

источник

2014-09-22 05:15:27 Shariq

Это не сработает для меня –

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

check this fiddle

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

источник

2014-09-26 18:11:52

Это не разрешает проблему с IE8. –

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

ответ

Смежные вопросы