当我全屏查看页面时,我有以下标记可以正常工作
,但是当我减小浏览器的宽度时,它会溢出div.
我已经使用了白色空间：面板上的正常但它不起作用. text-overflow：省略号也没有做任何事情.我正在使用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.05);
Box-shadow: 0 1px 1px rgba(0,0.05);
}
解决方法
对于文本溢出：要使用省略号,您必须为该元素添加overflow：hidden设置.
.panel-body {
text-overflow: ellipsis;
overflow: hidden;
}
