gpt4 book ai didi

css - 如何在达到列的 flex-basis 后使第二列内的文本换行

转载 作者:太空宇宙 更新时间:2023-11-04 06:40:19 25 4
gpt4 key购买 nike

如何使第二列中的文本在达到列的 flex-basis 后换行?考虑到我已将 flex-basis 设置为 100px,为什么右列的宽度仍然增加?

.specific-image-flexbox {
display: flex;
}
.specific-image-column {
flex: 4;
background-color: red;
}
.artwork-info-column {
flex: 1;
background-color: #f5f5f5;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
padding: 15px;
line-height: 1.8rem;
background-color: blue;
}
<div class="specific-image-flexbox">
<div class="specific-image-column">sssss</div>
<div class="artwork-info-column">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

最佳答案

希望对您有所帮助!

.specific-image-flexbox { display: flex; }
.specific-image-column {
flex: 4;
background-color: red;
}
.artwork-info-column {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
padding: 15px;
line-height: 1.8rem;
background-color: blue;
word-break: break-all;
}
<div class="specific-image-flexbox">
<div class="specific-image-column">sssss</div>
<div class="artwork-info-column">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

关于css - 如何在达到列的 flex-basis 后使第二列内的文本换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53855782/

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