我试图在flex box元素内垂直居中放置纯文本。
我决定将propertydisplay: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>
一种解决方案是将每个flex项目定义为自己的flex容器,以将其内容垂直居中align-items:center
。为了继续text-overflow
工作,请在每个弹性项目中添加一个子元素,然后可以将其用省略号截断。
对于为什么text-overflow
不适用display:flex
,我不能给出简洁的解释,大卫•韦斯特(David Wesst)也不能。用他的话说:
事实证明,确实没有一种干净的方法可以做到这一点。如果您想知道我如何得出这个结论,您可以停下来,因为我没有。负责该规范的人员已经做到了,您可以阅读以Mozilla错误报告开头的完整对话,并引起整个邮件组的讨论,讨论为何应(或在这种情况下不应将其)作为规范的一部分实施。
这是一个工作示例:
.container {
width: 400px;
height: 400px;
font-weight: 700;
border: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
flex: 1;
background-color: cyan;
}
.item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item:nth-of-type(2n) {
background-color: aliceblue;
}
<div class="container">
<div class="item"><span>Hello, I'm very very long string! Hello, I'm very very long string!</span></div>
<div class="item"><span>Hello</span></div>
<div class="item"><span>Hello</span></div>
<div class="item"><span>Hello</span></div>
</div>
另请参见:
对来自伸缩容器的文本设置省略号
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句