Разбить длинное слово в ячейке таблицы с процентной шириной

http://jsfiddle.net/L2yLe/

В скрипке все сказано. Я хочу использовать только CSS-решение, которое ограничивает ширину таблицы шириной div. Длинная строка должна быть разбита (но, как вы видите, это не так), и это приводит к переполнению таблицы.

Я не хочу использовать ширину пикселей. Это должно быть полностью жидким.

short string somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata short string
div { width: 50%; background-color: darkgray; padding: 15px; margin: 10px auto; } table { border-collapse: collapse; } td { border: 1px solid black; }

Парни смотрят на http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

 /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; 

напишите:

 table { border-collapse: collapse; table-layout: fixed; width:100% } td { border: 1px solid black; word-wrap:break-word; } 

Проверьте это: http://jsfiddle.net/L2yLe/7/

Добавление « word-break: break-all; » будет работать!

См. Этот пример .

Существует свойство CSS3: word-wrap: break-word; … ofc, для которого браузер должен иметь поддержку CSS3.

Я некоторое время играю с этим, и это не совсем легко.

Я поместил длинный текст в div и слово, завернутое в это, но ячейка TD по-прежнему достигла полной ширины, даже если div скрепил текст.

У меня есть решение, но его довольно много добавить в таблицу с несколькими строками, вероятно, было бы чрезмерно, я положу здесь на случай, если кто-то еще сможет его улучшить, я не буду разработчиком HTML и просто начал баловать себя , но здесь идет

решение для смешанной таблицы

Я поместил большой текст в другую таблицу внутри исходного td и установил эту таблицу в макет: fixed; ширина 100%. также добавлена ​​граница, чтобы показать, что происходит. Его немного лома, я надеюсь, что кто-то еще сможет его улучшить.

Мое решение немного уродливое. но он работает очень хорошо. Либо используя JS, либо что-то испускающее ваш html, вы можете поместить между всеми символами X текста. Это позволяет браузеру принимать решение о том, когда сломать слова, но визуально он будет отображаться как одна строка, если он подходит в ячейке таблицы.

Я не думаю, что можно сломать слово, используя css. Вы могли бы вычислить количество символов при извлечении данных, а затем вставить tags span вокруг разделов текста, если они превышают заданное количество последовательных неразрывных символов. По умолчанию рендеринг браузеров будет размещать линейные интервалы рядом друг с другом, если есть достаточное пространство или если на нем нет другой строки.