Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML overflow:hidden doesn't format text correctly
    primarykey
    data
    text
    <p>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:</p> <p><img src="https://i.stack.imgur.com/l4VQ8.jpg" alt="enter image description here"></p> <p>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 <strong>overflow: hidden;</strong> 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?</p> <p>Here's my code (HTML):</p> <pre><code>&lt;div class="newsitem"&gt; &lt;div class="titlemessagewrapper"&gt; &lt;h2 class="titel" align="center"&gt;&lt;?php echo $row['homepagetitel']; ?&gt;&lt;/h2&gt; &lt;div class="newsbericht"&gt; &lt;?php echo $row['homepagebericht']; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="newsfooter"&gt; &lt;span class="footer_author"&gt;&lt;a href=""&gt;&lt;?php echo get_gebruikersnaam_by_id($row['poster_id']); ?&gt;&lt;/a&gt;&lt;/span&gt; &lt;span class="footer_comment"&gt;&lt;a href=""&gt;Comments &lt;span&gt;todo&lt;/span&gt;&lt;/a&gt;&lt;/span&gt; &lt;a href="" class="footer_leesmeer"&gt;Lees meer&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is the CSS:</p> <pre><code>.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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload