HTML overflow:hidden doesn't format text correctly - php

Question

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"><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></span> <span class="footer_comment">Comments <span>todo</span></span>
Lees meer
</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;
}

Answer 1

You should not rely on the user to enter <cut> !
User Input = error
What if the user forgets to enter <cut>? Will your news item now look unprofessional?
What would be the point of a user creating a news item to find that some of it was cut off?
If the div can only fit a fixed string length you should validate the max length of the news item Input body instead of relying on <cut>. This can be simply achieved using maxlength attribute.
<textarea id="userinput" maxlength="150">Enter your news</textarea>
If you do use <cut> you should also add in overflow: hidden; to ensure that the content is not unprofessionally displayed if no cut tag is present.
If you want to display the all text and keep the div the same fixed height
Replace
overflow: hidden;
with
overflow:auto;
(Scroll bar won't appear when content is smaller than the div)
Otherwise validate the length of the string / content in your div or remove the CSS height attribute to allow all the content appear with no scroll bars.
Hope this helps

Answer 2

Remove the height attribute on the .titlemessagewrapper. Its this height attribute which is causing the cut off.

Answer 3

If you want the boxes to remain the same height: Take the whole string, perform substr and save in a new variable and echo that.
Eg.
<?php
$str = "abcdefghijkl";
$new_strsubstr($str, 0, 8); // abcdef
// will return abcdefhi
?>