我有3个bootstrap列,问题是: 1. column:当内部文本变大时,列不会“增长”,因此文本不会在列结束的地方停止。 2.列:当文本不仅仅是一个单词,而是例如2个单词(xxx xxx)时,该列加倍
如何更改它以使圆形列保持不变并且文本保留在列中? 谢谢!
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;
}
答案 0 :(得分:0)
word-wrap: break-word;
此属性将中断该单词并将其包装到下一行。我相信这就是你要问的。
至于为什么柱子没有“生长”。它是因为你正在设置宽度和高度 - 删除它,它会随着你的进展而增长。
.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链接,那将非常有用。