web前端入门到实战：css单行截断和多行截断问题

单行截断：

span {
  display: inline-block; // 如果不是block元素，还需要设置这个。
  width: 150px; // 超出的宽度
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; //超出用省略号
  white-space: nowrap; // 不换行
}

多行截断：

多行截断有好几种方法，

1： 最简单，使用-webkit-line-clamp ， 当然了，只能用在webkit内核浏览器， 并且不支持自定义点击展开的样式。

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
p {
  width: 400px; // 超过这个宽度
  text-overflow: ellipsis; // 使用省略号
  display: -webkit-box; // 必须使用这个
  overflow: hidden;// 必须使用，超出隐藏
  -webkit-line-clamp: 4; // 必需设置，
  -webkit-box-orient: vertical; // 设置里面元素排列顺序
  text-align: justify; // 里面问题排列方式
}

2: 也是面试中回答的方式，使用伪类。。。这个由于要使用js判断是否超出，因此适用于，你已经知道是大段文字的情景。 但是面试官不是很满意这个方式，呜呜呜

p{
   position: relative;
   height: 36px; // 面试官说这