предварительно заполненные символами с минимальной шириной и автоматическим переносом при изменении размера

У меня есть некоторая строка символов (все только буквенные и редкие символы новой строки, без пробелов или любых других разделителей), которые я хотел бы заполнить в ячейке таблицы до ширины ячейки (варьируется в зависимости от окна size, в примере установлено значение 50%). Я хочу, чтобы браузер почти не переносил строку при достижении ширины ячейки таблицы, но также приветствовал символы новой строки в строке. Содержимое в ячейке таблицы должно иметь заданную фиксированную минимальную ширину (200px в примере ниже), что должно привести к появлению вертикальной прокрутки при дальнейшем изменении размера окна. Этот момент, когда окно стало слишком маленьким, я показываю на этом скриншоте:

введите здесь описание изображения

Я добился необходимого поведения в FF10, используя max-width вместо td (игровая площадка), но я не могу t сделать то же самое для IE: он игнорирует max-width. Более того, у него очень странное поведение, когда max-width установлено на pre: рендерер игнорирует фактическую ширину содержимого и считает, что pre не было обернуто (игровая площадка — сравнение с FF; сообщалось о похожих проблемах здесь и здесь). В худшем случае можно строго зафиксировать содержимое на 200px (что должно быть применено к pre для IE, применение к td не имеет никакого эффекта). Чтобы это исправление затронуло только IE, я попробовал следующий CSS:

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    width: expression("200px");
}

td.wrap {
    color: red;
    max-width: 200px;
}

К сожалению, не работает для IE8.

Целевые браузеры: FF9 (и выше), IE7, IE8, Chrome (последние).

Извините, если эта проблема повторяется: я проверил Как мне обернуть текст в тег pre?, Как я могу перенести этот элемент списка в слова?, Невозможно сделать максимальную ширину, Max-Width не работает с таблицей для IE7 и многие другие: для IE не найдено определенного решения.


person dma_k    schedule 27.03.2012    source источник


Ответы (1)


Я попытался подойти к проблеме с другой стороны :) Оберните таблицу в div с min-width: 400px, и это сделает IE bahave. Вот скрипт: http://jsfiddle.net/6Agbw/3/. Надеюсь, это то, что вам нужно.

person Spadar Shut    schedule 13.05.2012
comment
Спасибо, вроде работает. P.S. Вы можете смело удалить свой предыдущий ответ. - person dma_k; 14.05.2012
comment
Ах, вы использовали таблицу table-layout: fixed. Я должен был удалить это из своей игровой площадки, потому что в этом случае это вызывает проблемы, когда таблица имеет более 2 столбцов, см. здесь. Любые идеи, как заставить это работать? - person dma_k; 14.05.2012
comment
Самое близкое, что я мог получить, это: jsfiddle.net/6Agbw/11. Обратите внимание на ‹col›s в таблице. Также я не мог не использовать table-layout: fixed и не разбивать текст на короткие td. Возможно, вам поможет вращение текста в этих td. - person Spadar Shut; 15.05.2012
comment
Похоже, что фиксированный макет таблицы (+ фиксированная ширина столбцов) - единственное решение. Спасибо за ваши старания! - person dma_k; 15.05.2012