在高度固定，实现文本一行或两行文本垂直对齐
2017-05-19 本文已影响39人
LuckyS007
在高度固定，实现文本一行或两行文本垂直对齐
- 把外框高度设置为两行(几行对齐就几行)的最大高度。
<style type="text/css">
.infos{
width: 100%;
max-width:400px;
height:auto;
overflow: hidden;
background: #000;
color:#fff;
display:table;
}
.icon{display:table-cell;
width: 50px;
height: 72px;
background: green;
vertical-align: middle;
}
.txt{
display:table-cell;
overflow: hidden;
vertical-align: middle;
}
.txt p{
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
vertical-align: middle;
overflow: hidden;
line-height: 20px;}
</style>
<body>
<div class="infos">
<div class="icon"></div>
<div class="txt"><p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p></div>
</div>
</body>
image.png
