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

1、清除浮动

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/*清除浮动*/ .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、文本超长自动换行

?

1 2 3 4 5 6

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

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

?

1 2 3 4 5 6 7 8 9

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 数据内容过长，限定显示行数，剩余超出部分显示... */ .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; }