在多行文字上加上省略号

小编典典

在多行文字上加上省略号

html

是否有解决方案，以div的最后一行在流体高度（20％）处添加省略号？

我-webkit-line-clamp在CSS中找到了该函数，但在我的情况下，行号取决于窗口大小。

p {

    width:100%;

    height:20%;

    background:red;

    position:absolute;

}


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

阅读 358

2020-05-10

共1个答案

小编典典

如果要将省略号（…）应用于一行文本，CSS可以通过该text-overflow属性使此操作变得容易。仍然有些棘手（由于所有要求，请参阅下文），但text-overflow使之成为可能且可靠。

但是，如果要在多行文本上使用省略号（如此处的情况），那么不要指望有什么乐趣。CSS没有执行此操作的标准方法，变通办法是命中注定的。

单行文字的省略号

使用text-overflow，可以将省略号应用于一行文本。必须满足以下CSS要求：

必须有一个width，max-width或flex-basis
一定有 white-space: nowrap
必须具有overflow除visible
必须为display: block或inline-block （或功能等效项，例如弹性商品）。

所以这将工作：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

<p>
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>.
  This is a test of CSS <i>text-overflow: ellipsis</i>.
  This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>

jsFiddle版本

但是，尝试删除width，或者将overflow默认值设置为visible，或者删除white-space: nowrap，或者使用除块容器元素（AND）之外的其他内容，省略号都失败了。

这里的一大收获：text-overflow: ellipsis对多行文字没有影响。（white-space: nowrap仅凭此要求就消除了这种可能性。）

2020-05-10