如图所示,文字过长会导致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是包裹在一起的元素占一行。