div容器文字过多导致高度不对齐处理方法

如图所示,文字过长会导致span不对齐,使用vertical-align: top;顶部对齐,但高度依旧不同。

<style>
div span{
    border: 1px solid #ececec;                      
    color: #4e4e4e;
    padding: 8px;
    display: inline-block;
    text-overflow: ellipsis;
}    
</style>
<div>
    <span>回访人</span>
    <span>回访时间</span>
    <span>回访小结</span>
</div>;
<div>
    <span>测试1</span>
    <span>测试2</span>
    <span>测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3测试3</span>
</div>

这时div添加 display: flex;可以解决高度不对齐的问题,inline-block是每个元素占一小行,flex是包裹在一起的元素占一行。

div容器文字过多导致高度不对齐处理方法

 

上一篇:输入框提示信息以及显隐效果


下一篇:bootsraptable 字段超出用省略号代替,更改字号大小