ブートストラップ列のサイズがテキスト内部に不適切に変化する/テキストが内部に残らない

Question

3つのブートストラップ列があり、問題は次のとおりです。 1.内部：テキストが大きくなると '列が終わるところで停止しません。 2.カラム：テキストが単なる単語ではなく、例えば2ワード（xxx xxx）の場合、カラムは2倍になります

どのようにして円であるカラムが変わらず、列の中に？ ありがとう！

HTML：このプロパティは、単語を分割し、次の行にそれをラップする

.row { 
font-size:18px; 
} 
#one{ 
cursor:pointer; 
background-color:#00b3b3; 
border-radius:50%; 
margin-left:150px; 
width:240px; 
hight:50px; 
line-height:250px; 
text-align:center; 
} 
#two{ 
cursor:pointer; 
background-color:#00b3b3; 
border-radius:50%; 
margin-left:100px; 
width:240px; 
hight:50px; 
line-height:250px; 
text-align:center; 
} 

#three{ 
cursor:pointer; 
background-color:#00b3b3; 
border-radius:50%; 
margin-left:100px; 
width:240px; 
hight:50px; 
line-height:250px; 
text-align:center; 
} 

Answer 1

word-wrap: break-word; 

<div class="row"> 
    <div id="one" class="col-md-1">xxxxxxxxxxxxxxxxxxxxxxxxx</div> 
    <div id="two"class="col-md-1">xxxxxxxxxxxx xxxxxxxxxx</div> 
    <div id="three"class="col-md-1">xxxx</div> 
</div> 

のCss。私はこれがあなたが求めているものだと信じています。

なぜ、列が「拡大」しないのは、幅と高さを設定しているためです。これを削除すると、処理が進むにつれて大きくなるはずです。

.row { 
font-size:18px; 
} 
#one{ 
    cursor:pointer; 
    background-color:#00b3b3; 
    border-radius:50%; 
    margin-left:150px; 
    text-align:center; 
    word-wrap: break-word; 
} 
#two{ 
    cursor:pointer; 
    background-color:#00b3b3; 
    border-radius:50%; 
    margin-left:100px; 
    text-align:center; 
    word-wrap: break-word; 
} 

#three{ 
    cursor:pointer; 
    background-color:#00b3b3; 
    border-radius:50%; 
    margin-left:100px; 
    text-align:center; 
    word-wrap: break-word; 
} 

注：今後、JSFiddleまたはBootplyリンクを提供できる場合は非常に便利です。