使用文本溢出:省略号和柔性盒对齐项:组合为中心。
使用文本溢出:省略号和柔性盒对齐项:组合为中心。
提问于 2018-01-31 14:59:49
我有一个div，它是一个包装器，里面还有一些子div。我正在使用flexbox将它们放置在彼此下面。现在，孩子们发短信了。文本与align-items: center;垂直对齐。子div的宽度取决于它的文本。当文本和包装器一样长的时候，div应该停止增长，里面的文本应该被剪掉。为此，我尝试使用text-overflow: ellipsis;。它不像预期的那样起作用。我知道我可以在display: inline-block;的情况下使用flexbox，但是我想使用flexbox将文本与text-overflow: ellipsis;结合起来，但它似乎不适用于我的示例。目前，带有长文本的项与包装器重叠，也没有省略号。该项目有固定高度。
我为这个话题找到的唯一答案是这个，但答案对我没有帮助：Ellipsis in flexbox container
希望一切都足够清楚。
.wrapper {
display: flex;
flex-direction: column;
background-color: lightcoral;
padding: 10px;
flex-wrap: wrap;
}
.wrapper__item {
min-width: 0;
flex-basis: 50%;
align-self: flex-start;
flex-direction: row;
width: auto;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
border: 1px solid black;
border-radius: 5px;
margin-bottom: 10px;
background-color: white;
height: 50px;
}<div class="wrapper">
<div class="wrapper__item">Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</div>
<div class="wrapper__item">Proin eget tortor ri.</div>
<div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-31 15:11:08
text-overflow: ellipsis不会在flex容器(display: flex)上工作。
主要原因是文本节点变成了一个匿名的flex子节点，需要min-width: 0来表现(否则它不会缩小到超过其内容大小)，但是由于不能用CSS锁定文本节点，所以我们需要用span包装它。
这里有一篇对The Automatic Minimum Size of Flex Items有很好解释的文章
注1:父溢出是由宽度+填充引起的，box-sizing: border-box将修复它。
注2:为了使align-items: center产生效果，项目需要一个高度，这里给出了50 to。
堆栈段
.wrapper {
display: flex;
flex-direction: column;
background-color: lightcoral;
padding: 10px;
}
.wrapper__item {
align-self: flex-start;
max-width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 10px;
border: 1px solid black;
border-radius: 5px;
margin-bottom: 10px;
background-color: white;
height: 50px;
}
.wrapper__item span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}<div class="wrapper">
<div class="wrapper__item"><span>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</span></div>
<div class="wrapper__item">Proin eget tortor ri.</div>
<div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>
Stack Overflow用户
发布于 2018-01-31 15:05:55
不需要在.wrapper__item类中使用.wrapper__item，因为text-overflow不适用于flex行。
对于height，您可以使用line-height，因为文本位于单个line....or中，您可以同时使用height和line-height。
堆栈片段
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
background-color: lightcoral;
padding: 10px;
}
.wrapper__item {
align-self: flex-start;
flex-direction: row;
width: auto;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0px 10px;
border: 1px solid black;
border-radius: 5px;
margin-bottom: 10px;
background-color: white;
box-sizing: border-box;
line-height:50px;
}<div class="wrapper">
<div class="wrapper__item">Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</div>
<div class="wrapper__item">Proin eget tortor ri.</div>
<div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48545178
复制相关文章
相似问题
腾讯云开发者
