Bootstrap Spalte ändert Größe unpassend zu Text innerhalb/Text bleibt nicht innerhalb

Question

Ich habe 3 Bootstrap-Spalten und das Problem ist: 1. Spalte: Spalte nicht "wachsen", wenn der Text innen größer wird, so der Text hört nicht auf, wo die Spalte endet. 2. Spalte: Wenn der Text nicht nur ein einzelnes Wort ist, sondern zB 2 Wörter (xxx xxx) verdoppelt die Spalte

Wie kann ich das ändern, so dass die Spalte, die ein Kreis ist, gleich bleibt und der Text bleibt In der Spalte? Danke!

Html:

<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; 
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; 

Diese Eigenschaft wird das Wort und wickeln Sie es in die nächste Zeile brechen. Ich glaube, das ist es, was Sie fragen.

Was, warum die Spalten ‚wachsen‘ nicht, es ist, weil Sie die Breite und Höhe setzen - entfernen, dass und es sollte, wie Sie wachsen Fortschritt.

.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; 
} 

Hinweis: Es ist sehr hilfreich, wenn Sie in Zukunft einen JSFiddle- oder Bootply-Link bereitstellen können.