CODEWITHSUNDEEP
htmlcss
rossanmol
rossanmol

Reputation: 1653

Hide text by padding when using overflow hidden

I am trying to set overflow: hidden so that it applies with padding set for the rectangle.

Here is an example: (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;
}

With the current implementation - padding applies to all sides except the bottom. What I am trying to achieve is have a padding in the bottom without trimming the text and using pesudo selectors such as ::before and ::after

Upvotes: 0

Views: 1567

Answers (2)

louierosero
louierosero

Reputation: 58

You're right about applying the padding to all side but then you declare a specific height (200px to be exact). And that is the reason why you cannot able to see the padding bottom. Try to set you height into (height: auto;). By this, your can able to adapt in every text that you want to put inside of it.

Regarding about the overflow: hidden; I don't really understand what you are trying to do here.

Upvotes: 1

DmaNP69
DmaNP69

Reputation: 173

Just add a colomn-width equal to the width of your div, so :

.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>

Upvotes: 3

Related Questions