CSS小技巧

最近写了点官网前台，久违的用了很多css，有些新的小知识积累，记在这里。

display:inline-block相关

做轮播的时候不想用float，用了display:inline-block来布局，但是会遇到一些小问题：

1. 元素之间会有额外的间隙。此时使用font-size: 0;letter-spacing: 0;来消除间隙。
2. 在safari下使用，会出现水平对不齐的bug，增加vertical-align:top;来做兼容。

文本展示相关：

首页经常会出现文本太长，需要隐藏的情况，此时使用一下样式：

// 单行
.ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 多行，其中@line是最大行数，这里是less的函数。
.multiple-ellipsis(@line) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;  // 重点
  -webkit-line-clamp: @line; // 重点
  -webkit-box-orient: vertical;
}

多个相同子元素的不同样式

有需求要求两列显示多个元素，但是元素个数不定。当元素总数为奇数，最后一个元素要有特殊样式；当元素总数为偶数，最后两个元素要有特殊样式：

.element:nth-child(2n+1):last-child{color:red;}
.element:nth-child(2n):last-child{color:red;}
.element:nth-child(2n+1):nth-last-child(2){color:red;}

这里的要点是nth-child()和last-child/nth-last-child()可以连续的配合使用。