场景
在使用flex布局，左右布局下，希望右侧宽度自适应，并且右边的文本不换行，需要使用省略号进行截断。
1. 正常情况
代码如下：
html布局：
<div class="flex">
<div class="left">左边</div>
<div class="right ellipsis">
右边 这是一段非常长的文字，我看看这个到底时怎么显示这是一段非常长的文字，我看看这个到底时怎么显示
</div>
</div>
css样式：
.flex {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.left {
width: 100px;
flex-shrink: 0;
border-right: 1px solid red;
}
.right {
flex-grow: 1;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
这个时候是正常情况。
2. 失效情况
如果右侧中元素中添加了子元素，
代码如下所示：
html：
<div class="flex">
<div class="left">左边</div>
<div class="right">
<div class="ellipsis">
右边 这是一段非常长的文字，我看看这个到底时怎么显示这是一段非常长的文字，我看看这个到底时怎么显示
</div>
</div>
</div>
会出现文本省略不生效情况。
原因是：
在flex布局中，容器（.flex）的子元素（.left 和 .right）会根据容器的display: flex;属性来分配空间。flex-grow、flex-shrink 和 flex-basis属性决定子元素如何增长、缩小以及它们的基础大小。
.left元素不会缩小，始终是100px的宽度。.right元素设置了flex-grow: 1;，将占据除了.left元素之外的所有可用空间。
然而，对于 .right 元素内部的 .ellipsis 元素，虽然设置文本省略，但这些样式只有在 .ellipsis 元素有一个明确且受限的宽度时才会生效。
在flex布局中，.ellipsis 元素默认会尝试占据其父元素（.right）的全部宽度，因为它没有设置 width 或 max-width 属性来限制自己。
.ellipsis 元素实际上没有受到任何宽度限制,因此，.ellipsis 元素中的文本会尝试在一行内完全显示，而不会触发省略号效果。
3. 解决方案
那么如何解决这个问题，不需要为 .ellipsis 元素显式设置宽度，因为 .right 元素已经通过Flex布局的动态空间分配机制获得了宽度。
需要确保 .right 元素（作为 .ellipsis 元素的直接父元素）不会溢出其外部容器的宽度，并且 .ellipsis 元素内部的文本在超出 .right 元素的宽度时能够被正确截断并显示省略号。
下面介绍两种方式：
都是作用于.right元素
3.1 设置min-width：0
设置min-width: 0;允许flex项目在必要时缩小其宽度，从而避免因为内容宽度过大而撑破父容器。
css设置：
.right {
flex-grow: 1;
min-width: 0;
}
3.2 overflow:hidden
overflow: hidden;应用于其父元素（如.right），以确保整个flex项目的宽度被正确限制，并且文本省略效果能够生效。
css设置：
.right {
flex-grow: 1;
overflow: hidden;
}
在项目中我们也可以这样写，将父子元素都设置为文本省略：
.right {
flex-grow: 1;
overflow: hidden;
&, & > * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
总结
最后总结一波，当我们在使用flex布局时，遇到文本省略失效的问题。
解决方式如下：
- flex子元素设置
min-width：0 - flex子元素设置
overflow:hidden
希望对大家有一点用处，如有错误，请指正O^O!
