Как сделать чтобы текст не вылазил за ширину блока?

Question

[The Dragger]

Как сделать чтобы текст не вылазил за ширину блока ?

<div class="port_desc">
                        <h3>Заголовок</h3>                      <p>LOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREM</p>
                        <img src="img/background.jpg" alt=""/>
                    </div>

.port_desc{
    padding-top: 15px;
    background-color: #ffffff;
    max-width: 700px;
    margin: auto;
}
.port_desc img{
    max-width: 700px;
    width: 100%;
}

Answer 1

[Nikolay Talanov]

word-break: break-all;
примененный к элементу с текстом, обеспечит перенос не влезающих в строку слов (если вам это необходимо конечно).
И поверх всего этого савим еще overflow: hidden; для самого контейнера, если вы хотите чтобы за его пределы ничего не вылезало.

Comments

[Евгений Петров]

Добавлю, что помимо word-break существует и word-wrap. Результат отличается — переносы между длинными словами во втором случае сохраняются.

[Nikolay Talanov]

Евгений Петров: Я вообще вначале написал о word-wrap, но потом вспомнил что он чуточку не подходит в этой ситуации и поменял на word-break.
А вообще в идеале должно юзаться hyphens, но у них с поддержкой беда.

Answer 2

[Юлия Старченко]

LOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREMLOREM

1) не писать такие длинные слова, а ставить пробелы между LOREM LOREM
2) если вы это сделали намеренно, тогда word-break в помощь

Answer 3

[LittleFatNinja]

overflow: hidden;