我试图在弹性盒元素内部垂直居中纯文本。
我决定使用属性
display:table-cell
和vertical-align:middle
。但它似乎在flexbox元素中不能正常工作。
如何在不使用包装器或定位的情况下实现垂直居中,同时仍使用省略号截断长文本?
.container {
width: 400px;
height: 400px;
font-weight: 700;
border: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
.item {
display: table-cell;
vertical-align: middle;
flex: 1 1;
background-color: cyan;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item:nth-of-type(2n) {
background-color: aliceblue;
}
<div class="container">
<div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>