Почему слова с фиксированной разметкой таблицы не переносятся?

Question

У меня есть таблица, которая заполняется текстом различной длины. Я установил фиксированное свойство css для table-layout, так как оно продолжает выдвигать таблицу за пределы родительского элемента, создавая горизонтальную полосу прокрутки.

Я хочу, чтобы мои td составляли ровно половину таблицы, которая будет в полном размере родительской. Я хочу, чтобы мой текст обернулся внутри тд. Вот как это выглядит:

Я хочу, чтобы текст был около 20, чтобы он не перекрывал другой текст. Я не могу использовать <br />.

Вот JSFiddle проблемы.

Answer 1

Вы можете использовать word-wrap: break-word на p. Он работал в вашем jsFiddle и совместим с IE, как его разработала Microsoft.

Answer 2

Причина, по которой он не ломается, заключается в том, что в строке нет пробелов. Как только вы добавляете пробел в набор чисел, он ломается. Следовательно, один из способов исправить это - присвоить word-wrap:break-work селектору p.

Answer 3

, так как вы устанавливаете ширину контейнера меньше, попробуйте увеличить ширину контейнера, Проверьте JSFiddle на демо , ширина 250 сломается до точных 20 позиций.

#container
{
    width: 250px;
}
p
{
 word-wrap: break-word
 }