我阅读了类似问题的帖子，但仍然无法使其正常工作。
当有大文本时，我试图使用文本省略号。
JSFiddle https://jsfiddle.net/heyrohit/bxrpduxu/
.fixIssue {
align-items: center;
}
.thumbnail {
width: 68px;
height: 68px;
border-radius: 50%;
object-fit: cover;
}
.imgDiv {
border: 1px solid yellow;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.textSpanInner {
display: flex;
justify-content: flex-start;
align-items: center;
}
.linkStyle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div style="height: 150px; border: 1px solid red;box-sizing:border-box">
<span class="fixIssue" style="display:flex; justify-content:flex-start;flex-wrap:nowrap;height:100px; border:1px dotted green;">
<span style="flex:0 0 auto; margin-right:10px;">
<div class="imgDiv">
<img src="https://dummyimage.com/68x68/d612e8/" class="thumbnail" />
</div>
</span>
<span style="flex:0 0 auto; margin-right:10px;">
<span class="textSpanInner">
<a href="" class="linkStyle">Big Name HereBig Name HereBig Name HereBig Name Here</a>
</span>
</span>
</span>
</div>
For the ellipsis要在祖先是 Flex 项目时工作，Flex 项目的所有子项和 Flex 项目本身都需要overflow: hidden (or min-width: 0），并且弹性项目还需要flex-shrink: 1因此它可以收缩到其内容以下。
此外，弹性项目的min-width默认为auto，这也意味着它不允许小于其内容，因此需要overflow: hidden (or min-width: 0).
因此，如果您进行以下更改，它将起作用：
- add
overflow: hidden to <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
- change
flex-shrink to 1 in <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
- add
overflow: hidden; to .textSpanInner
小提琴演示 https://jsfiddle.net/mardha4b/
注意，我还交换了imgDiv to a imgSpan因为将块元素作为内联元素的子元素是无效的
堆栈片段
.fixIssue {
align-items: center;
}
.thumbnail {
width: 68px;
height: 68px;
border-radius: 50%;
object-fit: cover;
}
.imgSpan {
border: 1px solid yellow;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.textSpanInner {
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
.linkStyle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div style="height: 150px; border: 1px solid red;box-sizing:border-box">
<span class="fixIssue" style="display:flex; justify-content:flex-start;flex-wrap:nowrap;height:100px; border:1px dotted green;">
<span style="flex:0 0 auto; margin-right:10px;">
<span class="imgSpan">
<img src="https://dummyimage.com/68x68/d612e8/" class="thumbnail" />
</span>
</span>
<span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
<span class="textSpanInner">
<a href="" class="linkStyle">Big Name HereBig Name HereBig Name HereBig Name Here</a>
</span>
</span>
</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
