Question

我正在尝试设置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;
}

使用当前实现 - 填充适用于除底部之外的所有边。我想要实现的是底部有一个填充而不修剪文本并使用pesudo选择器，如::before和::after

Answer 1

只需添加一个等于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>

Answer 2

你正确地将填充应用到所有方面但是你声明了一个特定的高度（确切地说是200px）。这就是为什么你无法看到填充底部的原因。尝试将高度设置为（height：auto;）。通过这种方式，您可以适应您想要放入其中的每个文本。

关于溢出：隐藏; 我真的不明白你在这里想做什么。

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

2 个答案: