は常に私がこの概念を持っているCSS

Question

でお互いの下のスパンを表示：https://jsfiddle.net/berhqd9a/

まず：どのように私はfoo1のとfoo2は、それぞれ他の下に表示させるために達成することができますか？私は、それはdisplay: blockがすべきことだと思った？

Second：divの枠線を無視するのではなく、長いfoo breakを作るにはどうすればよいですか？

Answer 1

Updated fiddle

で width:100%を使用することができます

1. display: block缶各スパンをブロックとして表示するには、<br>を使用して行を分割し、要素を次の行に移動します。

2. word-wrap: break-word;は、長いテキストを改行します。今あなたが

   span { 
       display: inline-block; 
   } 
   

   代わりの

   span { 
       display: block; 
   } 
   

   を持っている

#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;を使用してもお互いの下に表示されfoo1のとfoo2はを作るためにdisplay:blockを使用する必要があり、長いテキストを破る、あなたもdisplay:inline-block

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

Answer 3

Froxx、

Answer 4

まずdisplay: block - ブロック要素

セカンドとしての要素を表示します。テキストはdoesn'tこのルール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