FF3.0.7 Обтекание текстом

Зацепиться за соломинку здесь, но у кого-нибудь есть решение для переноса текста в Firefox 3.0.7?

Текст должен переноситься внутри контейнера, как и другие браузеры.

Пример: http://jsfiddle.net/4t7Ut/ (очевидно, рассматривается в FF3.0.7)

#container {
    border: 1px dashed;
    width: 100px;
}

.text-to-wrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

...

<div id="container">
<div class="text-to-wrap ">VWvU3dpVq5wJio6oFE82pmQuBTRzbii4dLd4NGBr332V2P4Skx8GwLozZrczNoRPmqWSrxnLEKh5PBZ6s3AjMFX3ftLHyuR7RGSA</div>
</div>

2 ответа

Решение

Чтобы сделать перенос содержимого таким образом, чтобы он был разбит на строки, каждая из которых содержала как можно больше символов (кроме последней строки, конечно), вам необходимо добавить <wbr> ставьте теги после каждого символа в текстовом содержимом, чтобы заставить вещи работать таким образом даже в древнем браузере, таком как Firefox 3. Вы можете использовать сценарии на стороне клиента для этой цели:

<script>
var cont = document.getElementById('container').getElementsByTagName('div')[0];
cont.innerHTML = cont.innerHTML.replace(/(.)/g, '$1<wbr>');
alert(cont.innerHTML);
</script>

Это почти никогда не достаточно, чтобы допустить такое нарушение. И человеческие, и компьютерные языки имеют свои собственные правила разрыва строк. Итак <wbr> тег должен быть вставлен только в подходящих местах, либо вручную, либо с использованием алгоритма, подходящего для контента.

Вместо <wbr>Вы также можете использовать его аналог уровня персонажа ZERO WIDTH SPACE (&#x200b;). Это не поддерживается очень старыми браузерами, хотя Firefox 3, кажется, с этим согласен.

Попытайся:

использование width:100%; display:inline-block; в .text-to-wrap

Другие вопросы по тегам