css单行省略号(css文本超出2行显示省略号)

  核心 CSS 语句

  overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)

image.png

  white-space: nowrap;(设置文字在一行显示,不能换行)

  text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

  要将省略号设置在文字的右下角,可以使用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,可以让文本在一行内显示。


发表评论

评论列表

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