CODEWITHSUNDEEP
htmlcss
Shaun Wild
Shaun Wild

Reputation: 1243

Cause text on a DIV to hide as the size changes

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Test</title>
    <style>
    .test{
        transition: height .3s;
        width: 300px;
        height: 1px;
        background-color: red;
    }
    .test:hover{
        height: 300px;
    }
    </style>
</head>
<body>
    <div class="test">
        <p>This is a paragraph that is hidden behind stuff, as you hover over the small red line, you should see it expand the text which is on it also</p>
    </div>
</body>
</html>

save this as a html file and load it up, what I want to happen is the text that is on the div gets physically cut off if the div is not large enough for it to be displayed. At the moment, the text will render there regardless of the size of the div. Does anyone know how to do this?

Upvotes: 0

Views: 19

Answers (1)

secelite
secelite

Reputation: 1373

You are looking for overflow: hidden, right?

JSFiddle: http://jsfiddle.net/vgaTV/

Upvotes: 1

Related Questions