Question

我有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;
}

Answer 1

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链接，那将非常有用。

Bootstrap列不适当地改变文本内部/文本不会留在里面

1 个答案: