5

Доброго времени суток! У меня возникла проблема небольшая. Когда в ячейке таблицы выводится большая длинная строка (например ссылка) то она растягивает всю таблицу, нарушая всю верстку таблицы. Вот к примеру в Opere корректно выводятся ссылки, перенос идет если строка выходит за границы ячейки th:

alt text

А вот как выводится к примеру в IE:

alt text

Второй вариант конечно неприемлиемый. Пробовал вот так задавать для div (который в ячейках находится):

style="overflow: hidden; white-space: nowrap"

И не помогает, а к тому же нарушает верстку и в опере.

Потом пробовал вот так для div-контейнера прописать:

div1 {
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, начиная с 1999 года */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
 }

Тоже не хочет работать... Подскажите как решить проблему?

Вот ссылка теперешней верстки таблицы в сервисе Edit Fiddle

Некорректно работает в хроме, ie.

6
  • Нет возможности задать явную ширину для div блока? или столбца таблицы?
    – HA3IK
    17 дек 2013 в 10:24
  • Для столбца пробовал задавать фиксированную width, но ситуация не менялась. Я не верстальщик, а программист, потому мне это кажется серьезной проблемой. Длинные строки заставляют разъезжаться ячейки.
    – IntegralAL
    17 дек 2013 в 10:47
  • что такое megasmiled ???? нет такого атрибута в html
    – zb'
    17 дек 2013 в 11:34
  • Да это потому что я выдрал код html из отладчика opera. В реальном коде у меня такого атрибута нет. Сам не пойму откуда он появился там. Вот поправил без этих странных тегов). jsfiddle.net/DBY7Z/4
    – IntegralAL
    17 дек 2013 в 11:56
  • это или расширение какое-то или вирус по всей видимости
    – zb'
    17 дек 2013 в 12:00

1 ответ 1

14

css:

word-break: break-all;

http://jsfiddle.net/oceog/DBY7Z/2/

пожалуйста, выделяйте проблему лучше, ваш код для примера должен выглядеть примерно так: http://jsfiddle.net/oceog/DBY7Z/3/

3
  • Спасибо за помощь! Только я не понял почему в этом примере нигде нет jsfiddle.net/oceog/DBY7Z/2 куска кода word-break: break-all? Что вы изменили там, что все работает?
    – IntegralAL
    17 дек 2013 в 12:24
  • 2
    он там есть: в секции .simple-little-table tr td поэтому я вам и говорю - лучше выделяйте проблему. это всем будет удобнее и отвечающему и спрашивающему, и тем кто с поиска попадет.
    – zb'
    17 дек 2013 в 12:28
  • Спасибо большое! Хорошо учту на будущее, буду локализовывать проблему. Отмечаю ответ как верным и палец вверх жму), @eicto
    – IntegralAL
    17 дек 2013 в 16:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.