我有以下标记,当我全屏查看页面时效果很好
,但是当我减小浏览器的宽度时,它会溢出 div。
我在 panel-body 上使用了 white-space: normal 但它不起作用。 text-overflow: ellipsis 也没有做任何事情。我正在使用 Bootstrap。
<div class="col-sm-4">
<section class="panel" style="background:#e74c3c; color:#FFF;">
<div class="panel-body">
COMPLAINT<br>
8
</div>
</section>
</div>
.col-sm-4 {
width: 33.33333333333333%;
}
.panel-body {
padding: 15px;
}
.panel {
margin-bottom: 15px;
background-color: #ffffff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
最佳答案
要使 text-overflow: ellipsis
正常工作,您必须向该元素添加 overflow: hidden
设置。
.panel-body {
text-overflow: ellipsis;
overflow: hidden;
}
关于html - Bootstrap : Text overflows out of div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18811321/