Разрыв строки CSS, Веб-дизайн, Wordwrap, Разрывы CSS - PullRequest
Новая
       0

Разрыв строки CSS, Веб-дизайн, Wordwrap, Разрывы CSS

1 голос
/ 05 февраля 2011

Может кто-нибудь помочь мне с этой проблемой CSS, у меня есть такая структура div: Это с длинной строкой, чтобы убедиться, что это не нарушает CSS, но с этим кодом это ... Я попытался использовать PRE с переносом слов и функцией PHP wordwrap () ... все они дают мне один и тот же перекрывающийся вывод ... Я хочу просто разбить такие длинные строки, чтобы они помещались в мой div, и все div были равномерно размещены ...

CSS - это: .load {Запас левый: 40px; ширина: 300px; высота: 30px; Размер шрифта: 12px; border-bottom: solid 1px #FFFFFF;} ............... HTML ................... 

<div class="load" id="load">
        <span>
            dddddddddddddddddsssssssssssssssssssssss<br />

ssssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss Время: 

        </span></div>
ддддддддддддддддддддддддддд
ддддддддддддддддддддддддддд
ddddddddddddddddd ВРЕМЯ:

............ много таких дивов

Невозможно прикрепить скриншот .... но выходные данные перекрываются с DIV ... и Div, у которых нет или меньше текста, в порядке ..

Ответы [ 2 ]

4 голосов
/ 07 марта 2011

Вы можете попробовать использовать свойство word-wrap, как показано в следующей демонстрации:

http://jsfiddle.net/audetwebdesign/pTH6Y/

Перенос по словам работает только при применении к элементам уровня блока с фиксированной шириной, div в моем примере с классом точным.

word-wrap - это свойство CSS3, поэтому внимательно проверьте его на наличие кросс-браузерных проблем; могут существовать префиксы конкретных поставщиков, которые вам может понадобиться для правильной работы стиля в других браузерах.

Существует еще один подход, основанный на свойстве white-space: 

white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */

Здесь вы действительно пытаетесь найти подход, который работает на всех популярных платформах.

Для справки: http://perishablepress.com/press/2010/06/01/wrapping-content/

0 голосов
/ 05 февраля 2011

Довольно сложно разбить слово, которое является reaaaaaaaaaaaaaaaaaaaaaaalyaly, вы можете только обернуть реальные предложения.

Также вы должны установить стиль div, чтобы скрыть переполнение, это то, что я всегда делаю, чтобы предотвратить ваш шаблончтобы дать сбой: 

div{ overflow:hidden; }

Другие возможные значения: 

oveflow-y:hidden;
oveflow-x:hidden;
// auto -- scrolls when overflowwing
// scroll -- scroll bar always visible
...