gpt4 book ai didi

html - 使用溢出隐藏时通过填充隐藏文本

转载 作者:太空宇宙 更新时间:2023-11-03 22:31:41 24 4
gpt4 key购买 nike

我正在尝试设置 overflow: hidden 以便它适用于为矩形设置的填充。

这是一个例子:(HTML)

<div class="box-test">
Stack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test
Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test
sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf
OverflowStack Test Test Test sdf Overflow
</div>

(CSS)

.box-test {
background-color: red;
width: 200px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}

body {
background-color: green;
}

在当前的实现中 - 填充适用于除底部以外的所有边。我想要实现的是在底部填充而不修剪文本并使用伪选择器,例如 ::before::after

最佳答案

只需添加一个等于 div 宽度的 colomn-width,所以:

.box-test {
background-color: red;
width: 200px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
column-width:200px;
}
body {
background-color: green;
}
<div class="box-test">
Stack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test
Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test
sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf
OverflowStack Test Test Test sdf Overflow
</div>

关于html - 使用溢出隐藏时通过填充隐藏文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48282167/

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