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

http://jsfiddle.net/L2yLe/

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

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

<div>
<table>
    <tr>
        <td>
            short string
        </td>
        <td>
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
        </td>
        <td>
            short string
        </td>
    </tr>
</table>
</div>

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

Ответ 1

Ребята взгляните на 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;

Ответ 2

напишите это:

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

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

Ответ 3

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

Смотрите Пример.

Ответ 4

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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