gpt4 book ai didi

html - 文本溢出 : ellipsis causes flex item to overflow flex container

转载 作者:太空狗 更新时间:2023-10-29 15:13:01 25 4
gpt4 key购买 nike

<分区>

我在 flex 容器中有两列。其中一列(橙色列)包含一个头像,其宽度应恰好为容器的 10%。

另一列(蓝色列)包含面板,面板的标题可能很长,因此我应该通过 css 将其截断。这张图片显示了我的期望:

我的期望:

What I expect

但是当我尝试执行 text-overflow: ellipsis 时,我的第二行变得比 flex 容器更宽。这是此行为的示例:

https://jsfiddle.net/8krtL9ev/1/

.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 10px;
display: flex;
}

.row1 {
background: red;
flex-basis: 10%;
flex-shrink: 0;
}

.row2 {
background: blue;
flex-basis: 90%;
margin-left: 10px;
padding: 10px;
display: flex;
}

.panel {
background: green;
flex-basis: 50%;
overflow: hidden;
}

.panel-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">

<div class="row1">
</div>

<div class="row2">
<div class="panel">
<div class="panel-title">
<span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span>
</div>
</div>
</div>
</div>

我该如何解决这个问题?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com