如何在div中保留增加的内容

Question

在下面的代码中，我正在从数据库中获取一些信息，并通过更改数字（17）来控制输出中有多少个字符。问题是，如果我从17更改为例如50，则输出将超出div。如果增加数字，如何将输出的字符保留在div内？

$shortUrlObj = shortUrl::loadByID($u);

<div class="services" style="margin: 1px;">
<h3><?php echo t("redirecting_to"); ?><br><?php echo $shortUrlObj->getFormattedLongUrl(17); ?></h3>

</div>

Answer 1

您可以添加text-overflow: ellipsis;，因此如果文本太长，它将被缩短...

div   {
  max-width: 300px;
  box-sizing: border-box;
  border: #333 dashed 1px;
  margin-bottom: 10px;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap; /* Don't forget this one */
  text-overflow: ellipsis;
}

<div class="ellipsis">Very Long Text with ellipsis: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
<div>Very Long Text without ellipsis: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>

Answer 2

您可以尝试一下。

.services{
  overflow: scroll;
}