gpt4 book ai didi

html - 即使在设置最小宽度 :0? 之后,Flex 子容器也会溢出父容器

转载 作者:行者123 更新时间:2023-12-05 09:08:21 25 4
gpt4 key购买 nike

<分区>

子 flex 元素超出了父容器的宽度。我也尝试设置 min-width:0 但它仍然不起作用。

这是我的 HTML 和 CSS 代码:

.parent{
display: flex;
border: 2px solid red;
}

.child1{
background: cyan;
height: 40px;
width: 40px;
flex-shrink: 0;
}

.child2 {
background: pink;
height: 20px;
width: 20px;
}

.child3 {
background: yellow;
height: 20px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class='parent'>
<div class='child1'>1</div>
<div>
<div class='child2'>2</div>
<div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
</div>
</div>

我的目的是为了防止 child3 溢出父容器并在溢出时显示省略号(...)。

感谢任何帮助。

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