HTML溢出：隐藏不能正确格式化文本

Question

我正在为一个美式足球队的网站工作。他们在首页上有这些新的站点，他们可以通过CMS系统进行管理。我在将这些新闻项目中的文本分配时遇到问题。其中两个新闻项目如下：

正如您所看到的，正确的newsitem文本显示得很好。但是左翼切断了它真的很糟糕。您只能在最后一句中看到文本的上半部分。我使用 overflow：hidden; 来确保文本不会使div或newsitem变大。有没有人知道如何通过HTML和CSS解决这个问题，还是应该用PHP将其从服务器端切断？

这是我的代码（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>

这是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

您应不依赖用户输入<cut>！

• 用户输入=错误
• 如果用户忘记输入<cut>怎么办？你的新闻现在看起来不专业吗？
• 创建新闻项目的用户发现其中一些内容被截断后会有什么意义？

如果div只能适合固定的字符串长度，则应验证新闻项输入正文的最大长度，而不是依赖<cut>。这可以使用maxlength属性简单地实现。

<textarea id="userinput" maxlength="150">Enter your news</textarea>

如果您使用<cut>，还应添加overflow: hidden;以确保在没有剪切标记的情况下不会非专业地显示内容。

如果要显示所有文本并使div保持相同的固定高度

替换

overflow: hidden; 

带

overflow:auto;

（当内容小于div时，不会显示滚动条）

否则验证div中字符串/内容的长度或删除CSS height属性以允许所有内容显示为没有滚动条。

希望这有帮助

Answer 2

删除.titlemessagewrapper上的height属性。它的这个高度属性导致了切断。

Answer 3

如果你希望盒子保持相同的高度：取整个字符串，执行substr并保存一个新变量并回显它。

EG。

<?php
    $str = "abcdefghijkl";
    $new_strsubstr($str, 0, 8);  // abcdef
    // will return abcdefhi 
?>