求解答?
这是想实现的效果
这是现在的效果
<div>
<div>
<div class="ceshi">
<img src="https://img.alicdn.com/imgextra/i3/2206481004341/O1CN01fZyp821hwE2GKA8z2_!!0-item_pic.jpg_430x430q90.jpg" alt="">
<p>
<strong>这是一段文字</strong>
</p>
</div>
<div class="ceshi">
<img src="https://img.alicdn.com/imgextra/i3/2206481004341/O1CN01fZyp821hwE2GKA8z2_!!0-item_pic.jpg_430x430q90.jpg" alt="">
<p>
<strong>这是一段有点长的有点长长长才是是是是文字</strong>
</p>
</div>
</div>
</div>
.ceshi{
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 4px;
box-sizing: border-box;
margin-right: 6px;
margin-bottom: 4px;
white-space: nowrap;
font-size: 12px;
border-color: #E02020!important;
width: 200px;
}
img{
border-color: #E02020!important;
max-width: 100%;
}
p{
text-align: center; word-wrap: break-word; word-break: break-all; white-space: normal;
}
给个固定高就行了
把文字div设置一个max-height:
设置padding看看
先把文字容器高度固定,并且去掉p标签默认的16margin。我这里高度设置的35,可自行调整
p {
margin: 0;
height: 35px;
然后设置父容器的垂直对齐方式,我见你的是底部对齐
.ceshi {
vertical-align: top;
}
然后一行文字的垂直对齐会靠上方,我就用js为一行的文字的p标签绑定一个行高
var p = document.getElementsByTagName('p');
var limit = 16;
for(var i=0 ; i<p.length ; i++){
console.info('text: ' + p[i].innerText);
console.info('length: ' + p[i].innerText.length);
if(p[i].innerText.length < limit){
p[i].style.lineHeight = '35px'; //与p标签style样式的高度一致
}
}
像是这种要求宽高定型 但是内容元素不确定的标题类一般都是定死一行溢出展示...或者多行溢出展示...
overflow:hidden;来隐藏多余的部分