CSS-обводка приводит к переполнению пробелов после div

Question

Я использую свойство word-wrap CSS (установленное в слово break), чтобы отобразить одну строку без разнесения в полном объеме в элементе div с фиксированной шириной и переменной высотой , Сам элемент div находится в ячейке таблицы <td>. Разрыв слова работает так, как ожидалось, сломав слово с определенной фиксированной шириной. Тем не менее, в IE9 (с стандартами документа IE7) после div появляется некоторое дополнительное пространство, в результате чего ячейка таблицы расширяется (не желательна). Сама ширина div кажется правильной, как указано в ее CSS. Я использовал границы вокруг ячейки div и таблицы для проверки. Я попытался явно установить ширину ячейки таблицы (и max-width), но ни один подход не работает. Такое поведение не наблюдается в Firefox или Chrome.

Редактировать: Добавлен образец кода here. Проблема возникает только с IE (Browser_Mode = IE9; Document_Mode = IE7).

Answer 1

По-видимому, td создает пространство для полной длины слова, как если бы оно не ломалось. Вы можете предотвратить это, установив overflow: hidden на div.

jsFiddle: http://jsfiddle.net/gmDpe/6/

Answer 2

я наткнулся на аналогичной проблемой один раз. Вы пытались использовать table-layout : fixed на своем элементе таблицы?

table-layout - очень малоизвестное, но widely supported свойство, которое может быть весьма полезным в таких случаях.