Как сохранить текст внутри родителя?

Допустим, принять это как пример:Как сохранить текст внутри родителя?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link type="text/css" rel="stylesheet" href="s.css"> 
    </head> 

    <body> 
     <div id="container"> 
      <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p> 
     </div> 
    </body> 
</html>

Css:

* { 
    margin:0px; 
    padding:0px; 
} 

#container { 
    margin:10px; 
    width:400px; 
    border: 2px solid red; 
}

И это показывает, как так:

enter image description here

Что мне делать, чтобы поместить этот вид тексты всегда в родительском div?

источник

2013-11-02 Aamu

У вас есть текстовая строка, которая обычно не существует в реальном мире, где общая ширина символов/букв изображения превышает ширину набора родительского элемента. В маловероятном случае этого события вы будете использовать слово word-wrap: break-word; –

Вы можете использовать word-wrap:break-word.

#container { 
    margin: 10px; 
    width: 400px; 
    border: 2px solid red; 
    word-wrap: break-word; 
}

jsFiddle example

В качестве альтернативы, вы можете также использовать overflow:hidden, который будет скрывать переполнение. Предполагается, что текст не требуется обернуть. jsFiddle example

Наконец, есть overflow:scroll, который позволит вам прокручивать переполнение. Примечание. Всегда будет полоса прокрутки независимо от длины текста. Чтобы этого избежать, вы также можете использовать overflow:auto. Я не знаю, чего ты хочешь. jsFiddle example из overflow:scroll

источник

2013-11-02 16:51:00

+1; Я был * о *, чтобы опубликовать это одно и то же: P – Doorknob

Спасибо! слово-обертывание было тем, что я искал. – Aamu

Предупреждение: Возможно, ваше желаемое поведение является ответом JoshC, но мой ответ сохраняет текст внутри родителя тоже (по-другому).

Применение overflow отличается от visible (т.е. auto, scroll или hidden).

В большинстве случаев я рекомендую auto:

#container { 
    margin:10px; 
    width:400px; 
    border: 2px solid red; 
    overflow: auto; 
}

Demo

источник

2013-11-02 16:52:28 Oriol

Почему downvotes? Обычно желаемое поведение - ответ JoshC, но мой ответ также сохраняет текст внутри родителя. – Oriol

У вас есть текстовая строка, которая обычно не существует в реальном мире, где общая ширина символов/букв изображения превышает установленный ширина родительского элемента.

В маловероятном случае это происходит вы будете использовать word-wrap: break-word;

JSFiddle с нормальной текста.

источник

2013-11-02 16:56:35

На самом деле я думал, что мне делать, если пользователи просто публикуют такую строку в сообщении! В любом случае спасибо! :) – Aamu

Это маловероятно, что у вас будет одно слово или строка такой длинной длины без пробелов. Пересмотрите длину вашего фактического контента. Используя overflow:hidden, вы скрываете только лишний текст за пределами контейнера, я предполагаю, что вы этого не захотите. Если вам действительно нужно одно слово, которое так много (или даже больше), то вам нужно использовать word-wrap:break-word или word-break:break-word. Тем не менее вы можете прочитать следующие сообщения для дальнейшей справки.

how to use automatic css hyphens with word-break: break-all?

How to break long words in a table td?

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

источник

2013-11-02 17:14:47 maksbd19

Как сохранить текст внутри родителя?

ответ

Смежные вопросы