Подтвердить что ты не робот

Текст не обертывается в тег p

У меня есть два плавающих divs, бок о бок, с p-тегами внутри. Текст в тегах p не переносит и просто переполняет контейнер, как вы можете видеть в тексте под изображениями:

Example:

Мой HTML выглядит так:

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

Мой CSS:

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

Кто-нибудь испытал это раньше? У меня нет! Вождение меня безумно!

4b9b3361

ОТВЕТЫ

Ответ 1

Перенос слов происходит только тогда, когда происходит разрыв слова.

Если у вас есть слово, которое до тех пор, пока оно не сломается.

Правильное решение - писать реальный контент, а не бессмысленные строки символов. Если вы используете контент, созданный пользователями, добавьте проверку для исключительно длинных слов и запретите их (или вырезайте часть из них для URL-адресов, сохранив все это в ссылке).

В качестве альтернативы вы можете использовать свойство word-break CSS, чтобы сообщить браузеру о разрыве строки в середине слов.

p { word-break: break-all }

(Примечание поддержка браузера).

В качестве альтернативы вы можете использовать overflow для усечения текста, если он не будет помещен в контейнер.

Ответ 2

Отдайте этот стиль тегу <p>.

p {
    word-break: break-all;
    white-space: normal;
}

Ответ 3

Для всех, кто все еще борется, не забудьте проверить и установить, было ли задано значение высоты строки для соответствующего шрифта: он может переопределять перенос слов.

Ответ 4

Это потому, что у вас есть непрерывный текст, означает одно длинное слово без пробела. Чтобы разбить его, добавьте word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; word-break: break-all; background:red
}

DEMO

Ответ 5

Это не ответ на вопрос, но когда я нашел эту страницу, глядя на вопрос, который у меня был, я хочу упомянуть о решении, которое я нашел, поскольку это стоило мне много времени. В надежде, это будет полезно для других:

Проблема заключалась в том, что текст в <p> тег не будет складываться в div. В конце концов, я открыл инспектора и заметил "все, что не сломалось" между всеми словами. Мой редактор, vi, просто показывал обычные пробелы (некоторые невидимые chr, я не знаю, что), но я скопировал текст в PDF-документе. Решение заключалось в том, чтобы скопировать пустое пространство из vi и заменить его пустым пространством. то есть. :% s///g, где пробел, который должен быть заменен, был скопирован из текста нарушения. Задача решена.

Ответ 6

Вы можете использовать word-wrap для разрыва слов или непрерывной строки символов, если она не помещается в строке в контейнере.

word-wrap: break-word;

это приведет к разрыву строк в соответствующих точках разрыва, если только одна строка символов не помещается в строку, в этом случае она сломается.

JSFiddle

Ответ 7

ЛЕГКО

p{
    word-wrap: break-word;
}

Ответ 8

Для тех, кто оказался здесь, я искал css

overflow-wrap: break-word;

Который будет разбивать слово только в случае необходимости (длина одного слова больше ширины буквы p), в отличие от word-break: break-all который может разбить последнее слово в каждой строке.

демонстрация переполнения

Ответ 9

Решения на самом деле

p{
    white-space:normal;
}

Вы можете изменить поведение разрыва, изменяя свойство разрыва слова

p{
    word-break: break-all; // will break at end of line 
}

break-all: сломает строку в самом конце, разрывает в последнем слове слово-break: это скорее тормоз, хорошо сломается, например, при? нормальная точка: то же, что и перенос слов

Ответ 10

добавить свойство float: left к изображению.

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
    float:left;
}