HTML overflow:hidden doesn't format text correctly
Posted
by
Rens Groenveld
on Stack Overflow
See other posts from Stack Overflow
or by Rens Groenveld
Published on 2012-11-02T10:35:46Z
Indexed on
2012/11/02
11:00 UTC
Read the original article
Hit count: 342
I'm working on a website for an American Football team. They have these newsitems on their front page which they can manage through a CMS system. I have a problem with alligning the text inside those news items. Two of the news items look like this:
As you can see, the right newsitem text are displayed nicely. But the left cuts it off really bad. You can only see the top half of the text at the last sentence. I use overflow: hidden; to make sure the text doesn't make the div or newsitem bigger. Does anyone have any idea how to solve this through HTML and CSS or should I cut it off serverside with PHP?
Here's my code (HTML):
<div class="newsitem">
<div class="titlemessagewrapper">
<h2 class="titel" align="center"><?php echo $row['homepagetitel']; ?></h2>
<div class="newsbericht">
<?php echo $row['homepagebericht']; ?>
</div>
</div>
<div class="newsfooter">
<span class="footer_author"><a href=""><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></a></span> <span class="footer_comment"><a href="">Comments <span>todo</span></a></span>
<a href="" class="footer_leesmeer">Lees meer</a>
</div>
</div>
And here is the CSS:
.newsitem{
float: left;
height: 375px;
width: 296px;
margin: 20px 20px 0px 20px;
background-color: #F5F5F5;
}
.newsitem .titel{
color:#132055;
font-size:1.2em;
line-height:1.3em;
font-weight:bold;
margin:10px 5px 5px 5px;
padding:0 0 6px 0;
border-bottom:1px dashed #9c0001;
}
.titlemessagewrapper{
height: 335px;
overflow: hidden;
}
.newsitem .newsbericht{
padding:5px 5px 5px 5px;
font-size: 0.8em;
margin-bottom: 5px;
}
.newsitem .newsfooter{
width: 100%;
height: 25px;
background-color: #132055;
margin: 0px auto;
font-size: 0.8em;
padding-top: 5px;
margin-top: 10px;
border: 1px solid #9c0001;
}
© Stack Overflow or respective owner