1

我正在为一个美式橄榄球队开发一个网站。他们的首页上有这些新闻站点，可以通过 CMS 系统进行管理。我在对齐这些新闻项目中的文本时遇到问题。其中两条新闻如下所示：

在此处输入图像描述

如您所见，正确的 newsitem 文本显示得很好。但是左撇子真的很糟糕。您只能在最后一句看到文本的上半部分。我使用溢出：隐藏；确保文本不会使 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;
}
4

3 回答 3

2

你不应该依赖用户进入<cut>！

  • 用户输入 = 错误
  • 如果用户忘记输入<cut>怎么办？您的新闻项目现在会显得不专业吗？
  • 用户创建新闻项目以发现其中一些被切断的意义何在？

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

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

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

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

代替

overflow: hidden;

和

overflow:auto;

（内容小于div时不会出现滚动条）

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

希望这可以帮助

于 2012-11-02T10:47:17.940 回答
1

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

于 2012-11-02T10:38:06.767 回答
1

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

例如。

<?php
    $str = "abcdefghijkl";
    $new_strsubstr($str, 0, 8);  // abcdef
    // will return abcdefhi 
?>
于 2012-11-02T10:38:48.367 回答