HTML / CSS: Div в фоновом сопоставлении, содержащий текст

Question

У меня есть контейнер div с идентификатором container вокруг.

Внутри у меня есть div с id inside, который может содержать текст, который на шире , чем контейнерный div. Текст не должен быть завернут.

Итак, вот как это выглядит на самом деле:

_____DIV CONTAINER________________________
|'---DIV INSIDE--------------------------|----------------
|'                                       |               '
|' here it contains some long text which is very long    '
|'                                       |               '
|'---------------------------------------|---------------'
|________________________________________|

Теперь я хочу, чтобы это выглядело так:

_____DIV CONTAINER________________________
|'---DIV INSIDE--------------------------|
|'                                       |
|' here it contains some long text which |
|'                                       |
|'---------------------------------------|
|________________________________________|

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

Если я решу это, внутренний div показывает правую границу внутри КОНТЕЙНЕРА, но текст продолжается. Так это случайно выглядит так:

_____DIV CONTAINER_____________________________
|'---DIV INSIDE------------------------'      |
|'                                     '      |
|' here it contains some long text whic'h look| [and here's the text under the container]
|'                                     '      |
|'--------------------------------------      |
|_____________________________________________|

Как я только что увидел, он должен выглядеть прямо здесь, в стеке:

........................................................look at the border here |  very long text very long text very long text very long text very long text very long text very long text very long text

Текст выходит за встроенную границу div, но не переносится. Это то, чего я хочу достичь. Как я могу решить это?

Answer 1

Вы хотите установить свойство переполнения контейнера div для прокрутки:

#container {
    overflow:scroll;
}

Answer 2

имеют 3-ий div внутри "inside", который не имеет установленной ширины и допускает переполнение.

это будет означать, что содержимое внутри будет переполнено, но не изменит размер внутри и его родительские элементы div.

также два полезных css-правила, которые могут быть полезны для применения к div внутри:

overflow-x: auto;
overflow-y: hidden;

(которое будет показывать только полосу x).

Надеюсь, это поможет?

Answer 3

Полагаю, вы хотите установить для родительского div значение overflow: scroll.