Question

我的网站目前有两种不同类型的用户帖子。仅包含文字的帖子和包含文字和一张照片的帖子。用户页面在名为postbox的div类中显示这两种帖子，该类使用“ display：inline-block”，因此帖子保持直线，直到页面宽度结束。页面宽度结束后，下一个帖子将继续在前一个帖子下方对齐，并且循环将继续，直到没有其他帖子可以显示为止。

喜欢这个。

Post 1 Post 2 Post 3
Post 4 Post 5 Post 6
Post 7 Post 8 Post 9

当帖子的文本宽度大于邮箱容器的宽度时，我希望将文本换行直到其达到邮箱的最大高度，然后我希望文本使用“ text-overflow：省略号”来隐藏其余的文本。

我的问题从这里开始。当文本实际上长于邮箱的宽度时，我可以使用“ overflow-wrap：break-word”将文本包含在邮箱中，但是下面的邮箱将被所创建的新行的确切宽度降低通过溢出包装。这种降低效果是不希望的，我希望其行上的所有邮箱都以相同的高度开始。

文字换行时，我的信箱看起来像这样。

Post 1 Post 2
              Post 3
Post 4 Post 5 Post 6
Post 7
       Post 8 Post 9

当我删除“ over-wrap：break-word”时，文本将继续在邮箱外面，但是之后的邮箱将正确地保持在其行的相同起始高度。

我的CSS


    .postbox {
        width: 300px;
        height: 150px;
        padding: 10px;
        margin: 4px;
        background-color: #555;
        border-radius: 4px;
        position: relative;
        display: inline-block;
        color: white;
        overflow-wrap: break-word;
    }
    .postbox p {
        width: 280px;
        height: 100px;
        min-height: 100px;
        max-height: 100px;
    }
    .postbox img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        top: 5px;
        right: 5px;
        border-radius: 4px;
    }
    .postbox a {
        text-decoration: none;
        color: white;
    }

我的邮箱功能（说明是我需要包装的部分）

echo "<div class='postbox'><p>";
                        echo $row['title']."<br>";
                        echo $row['date']."<br>";
                        echo $row['description']."<br>";
                        echo "<a href=view.php?user=".$userName."&post=".$postid.">•••</a>";
                        echo "</p>";
                        echo "</div>";

如果您有任何问题，我将非常乐意回答。谢谢。

为什么这种溢出包装会破坏我对邮箱的对齐方式？

0 个答案: