css超出隐藏显示省略号(css文字省略号)

  超出隐藏是指当某个元素内的内容,超出该元素的边界时,如何隐藏这些内容。

image.png

  要将省略号设置在文字的右下角,可以使用CSS中的text-overflow属性,该属性可以用于控制文本溢出的方式。设置text-overflow为ellipsis,可以让文本溢出时显示省略号。同时,需要将文本的宽度设置为固定值,并且将文本的位置设置为相对定位,然后使用bottom和right属性将省略号定位在文本的右下角。例如:



```

div {

width: 100px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

position: relative;

}

div::after {

content: '...';

position: absolute;

bottom: 0;

right: 0;

}

```

  以上代码将一个div元素的宽度设置为100像素,文本超出部分显示省略号。使用伪元素::after在div元素的右下角添加省略号。最后将div元素的white-space属性设置为nowrap,可以让文本在一行内显示。

发表评论

评论列表

还没有评论,快来说点什么吧~