换行后有不撑起盒子的方法么?

求解答?
这是想实现的效果

img

这是现在的效果

img


代码

 <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看看

img

先把文字容器高度固定,并且去掉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;来隐藏多余的部分