Question

我有一个描述的div。但是div不应超过一定的宽度和高度。

进入div的内容使div超出限制。

如何强制调整内容大小以使div不会超出限制？

目前我的div看起来像这样。

#Description {
    margin-top: 0px;
    max-height: 150px;
    max-width: 230px;
    background-color: #365478;
    display: inline-block;
    max-width: 500px;
    display:table;                
}

这是我用来调用描述div的HTML。

<?php echo "<div id = 'Description'>" . $output[Description] . "</div>" ?>

如果它有帮助您可以在我在这里工作的网站上看到问题。 luke.dx.am

Answer 1

<table> elements （以及display: table的用户）会自动展开以允许包含所有内容，无论指定的最大宽度是多少。想要将一个段落直接输出到表中也很奇怪。因此，我建议改为将内容更改为display: block。

除此之外，您可能希望在文本中添加省略号，以便在文本多于限制区域时可以切断并显示三个点。这可以通过应用white-space: nowrap，overflow: hidden和text-overflow: ellipsis来完成，如下所示：

#Description {
  display: block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

还应该注意的是，我无法在您的网站上进行手动测试，因为我的过滤器阻止了性内容。我只能开始怀疑你在那里举办的活动;）

收缩内容以适应div

1 个答案: