案例展示

注意到省略号的文本溢出处理了吗？这部分可以通过CSS动态截取文本并自动增添省略号

但也有些网站是从根源解决溢出问题，他们会在前后或后端对数据进行长度截取处理，再将数据展示出来

单行文本溢出隐藏处理

.single-line{
  overflow: hidden; /* 对溢出的部分进行隐藏 */
  text-overflow: ellipsis; /* 对文本溢出部分使用省略号显示 */
  white-space: nowrap; /* 禁止文本换行 */
}

多行文本溢出处理

多行文本溢出处理需要利用的弹性伸缩盒，这是CSS3提出新增展示模型，但目前各大浏览器均没有适配，但其在webkit上已经实现，因此可以使用CSS前缀-webkit-使用相关CSS属性

/* 双行文本溢出处理 */
.multiple-line-2{
    overflow: hidden; /* 对溢出部分进行隐藏 */
  text-overflow: ellipsis; /* 对文本溢出部分使用省略号显示 */
  /* 以下利用弹性伸缩盒模型显示来实现行数的控制 */
  display: -webkit-box; /* 修改展示模式 */
  -webkit-box-orient: vertical; /* 设置伸缩盒排列方式为纵向排列 */
  -webkit-line-clamp: 2; /* 设置行数 */
}