CODEWITHSUNDEEP
htmlcssoverflow
Sufiyan Ghori
Sufiyan Ghori

Reputation: 18753

overflow property and a fixed height

look at this image folks, instead of using overflow:hidden there is still some text appearing i want to hide it too how can i do this ? (i don't want to reduce or increase the height, the height should be as it is)

enter image description here

look at the area highlighted in Red, this is what irritating me. how can i fix this ?

this is the CSS of the content,

height:114px;
overflow:hidden;
padding:12px 12px 0;
padding-bottom:12px;
font-size:11px;
line-height:16px;
background-color:#e1f6fa;

enter image description here

here you go, of i fix it using css/html for the third content box , the fifth content box won't get fixed. there are a lot other boxes having different content inside them so it is useless to change height, line-height proeprty. can it be done by php ? if yes then how ?

Upvotes: 0

Views: 1297

Answers (3)

techfoobar
techfoobar

Reputation: 66663

Make sure the height property is a multiple of the line-height value. That will fix this. For ex: for a line-height of 16px, you can have a height of 96px, 112px etc. A height of 114px leaves 2 pixels at the bottom which will inevitably display the leading 1~2 pixels (depending on font used) of the next line of text.

Upvotes: 3

designersvsoft
designersvsoft

Reputation: 1859

You have to create new id or class for particular content box. For example

.content_box p{
Line-height:20px;
}

Html View

<div class="content_box">
<p>test message</p>
</div>

It is not affect the other content boxes.

Upvotes: 2

Wes Crow
Wes Crow

Reputation: 2967

You could try increasing line-height or font size. I don't believe that there is any other way to do it with css.

Upvotes: 0

Related Questions