css文本溢出隐藏显示省略号

纯css实现文本溢出隐藏显示省略号

1.单行文本溢出隐藏省略号

.text{
  display:block;//行内元素转块元素
  width:200px;//设置宽度
  white-space: nowrap;//强制不换行
  overflow: hidden;//溢出内容隐藏
  text-overflow: ellipsis;//溢出部分用省略号代替
  }

2.多行文本溢出隐藏显示省略号

overflow: hidden;//溢出内容隐藏
display: -webkit-box;//谷歌自带属性，是下面两个属性的前提条件
-webkit-line-clamp: 2;//设置可显示的行数
-webkit-box-orient: vertical;从上向下垂直排列子元素。

box-orient 属性规定框的子元素应该被水平或垂直排列。

• 目前没有浏览器支持 box-orient 属性。
• Firefox 支持替代的 -moz-box-orient 属性。
• Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

flexbox是有两种语法方式的，一种是display: box 和 display: flex及对应的厂商前缀方法。前一种是09年开始实施的，后一种是2012年开始使用的。