Всегда отображать пролеты друг под другом с помощью CSS

Question

У меня есть это понятие: https://jsfiddle.net/berhqd9a/

Во-первых: Как я могу добиться, чтобы foo1 и foo2 отображаются друг под другом? Я думал, это то, что должен делать display: block?

Во-вторых: Как я могу достичь длинного перерыва foo вместо игнорирования границы div?

Answer 1

Updated fiddle

1. display: block для отображения каждого диапазона в виде блока или вы можете использовать <br>, чтобы разбить линию и привести элементы к следующей строке.

2. word-wrap: break-word; сломает длинный текст.

#main { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
} 
 
.wrapper { 
 
    display: inline; 
 
} 
 
span { 
 
    display: block; 
 
    word-wrap: break-word; 
 
}

<div id="main"> 
 
    <p class="wrapper"> 
 
    <span>foo1</span> 
 
    <span>foo2</span> 
 
    <span>loooooooooooooooong foooooooooooooooooooo</span> 
 
    </p> 
 
</div>

Answer 2

https://jsfiddle.net/IA7medd/berhqd9a/1/

разбить длинный текст, который вы должны использовать word-wrap: break-word;, а также использовать display:block сделать foo1 и Foo2 отображаться друг под другом, вы можете также использовать width:100% с display:inline-block

span { 
     display: block; 
    word-wrap: break-word; 
} 

Answer 3

Froxx,

прямо сейчас у Вас есть

span { 
    display: inline-block; 
} 

вместо

span { 
    display: block; 
} 

Answer 4

Первыйdisplay: block - Отображает элемент как блочный элемент

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

CSS

#main { 
    border: 1px solid black; 
    width: 100px; 
} 

.wrapper { 
    display: inline-block; 
} 

span { 
    display: block; 
    word-break: break-all; 
} 

DEMO