CSS常用样式日常总结(1) - 常用样式集合

1、清除浮动

/*清除浮动*/
.clearfix:after {
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: '.';
  clear: both;
}

* html .clearfix {
  zoom: 1;
}

*:first-child + html .clearfix {
  zoom: 1;
}

2、文本超长自动换行

/*文本超长自动换行*/
.beyond-auto-wrap {
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}

3、数据内容过长，超出单行显示区域，超出显示省略号(...)

/* 超出单行显示区域，超出显示... */
.out-range-ellipsis {
  // 溢出隐藏
  overflow: hidden;
  // 强制在一行显示
  white-space: nowrap;
  // 显示省略号
  text-overflow: ellipsis;
}

4、数据内容过长，限定显示行数，剩余超出部分显示省略号(...)

/* 数据内容过长，限定显示行数，剩余超出部分显示... */
.out-rows-ellipsis{
  // 溢出隐藏
  overflow: hidden;
  // 显示省略号
  text-overflow: ellipsis;
  // 将对象作为弹性伸缩盒子模型显示，和-webkit-line-clamp结合使用
  display: -webkit-box;
  // 用来限制在一个块元素显示的文本的行数，设置最多显示几行，需要组合其他的 WebKit 属性
  -webkit-line-clamp: 3;
  // 设置伸缩盒对象的子元素的排列方式，和-webkit-line-clamp结合使用
  -webkit-box-orient: vertical;
}