Question

如何在多行div字段中使用省略号截断文本？当div是单行时它可以工作。如何使它适用于多行，因此它将省略号放在div右下角的最后？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

#div2 {
    /*white-space: nowrap; */
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
    height: 3em;
}

</style>
</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "white-space: nowrap;":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "height: 3em;":</p>
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

</body>
</html>

＆＃13;

Answer 1

这没有太复杂。但它似乎不支持跨浏览器。

.description {
  height: 4.5em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

#div2 {
    /*white-space: nowrap; */
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
    height: 3em;
}

#div3 {
    width: 12em; 
    border: 1px solid #000000;
    height: 3em;
    line-height: 1em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "white-space: nowrap;":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "height: 3em;":</p>
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

<p>This is the solution.</p>
<div id="div3">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

如何使用CSS在多行div中使用省略号截断文本？

1 个答案: