跳到主要内容

语法

2023年08月19日
柏拉文
越努力，越幸运

一、单行文本​

1.1 原理​

  • text-overflow:ellipsis: 当文本溢出时，显示省略符号来代表被修剪的文本

  • white-space:nowrap:设置文本不换行

  • overflow:hidden: 当子元素内容超过容器宽度高度限制的时候，裁剪的边界是border box的内边缘

  • 用三个属性的首字母就是: TWO

1.2 实现​

p{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width:400px;
}

二、多行文本​

2.1 基于行数截断​

原理

  • overflow: hidden

  • display: -webkit-box: 将对象作为「弹性伸缩盒子模型」显示

  • -webkit-line-clamp: n: 和①结合使用，用来限制在一个块元素显示的文本的行数(n)

  • -webkit-box-orient: vertical: 和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式

.text{
    overflow: hidden;           
    text-overflow: ellipsis;     
    display:-webkit-box;        
    -webkit-box-orient:vertical; 
    -webkit-line-clamp:3;        
}

2.2 基于高度截断​

原理

实现

.text {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
  }
.text::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
}