HTML overflow:hidden doesn't format text correctly
- by Rens Groenveld
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;
}
