CSS技巧

一、奇偶数不同样式

css样式代码：

.nub{ font-size:30px; font-weight:700; color:#30F}
.nub:nth-of-type(2n){ color:#900}

<style>
.nub{ font-size:30px; font-weight:700; color:#30F}
.nub:nth-of-type(2n){ color:#900}
.nub:nth-of-type(3n){ color:#990}
</style>
<div class="nub">01</div>
<div class="nub">02</div>
<div class="nub">03</div>
<div class="nub">04</div>
<div class="nub">05</div>
<div class="nub">06</div>
<div class="nub">07</div>
<div class="nub">08</div>
<div class="nub">09</div>

效果：

二、文字缩略设置

1、单行文字缩略

css样式代码：

div{ width:300px; height:25px; line-height:25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

<style>
 div{ width:300px; height:25px; line-height:25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>

<div>
	我是一行要缩略的文字。我是一行要缩略的文字。我是一行要缩略的文字。我是一行要缩略的文字。我是一行要缩略的文字。
</div>

效果：

2、多行文字缩略

css样式代码：

div{ width:300px; height:50px; line-height:25px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

<style>
 div{ width:300px; height:50px; line-height:25px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
</style>

<div>
	我是一行要缩略的文字。我是一行要缩略的文字。我是一行要缩略的文字。我是一行要缩略的文字。我是一行要缩略的文字。
</div>

效果：

PS：-webkit-line-clamp设为几，就是显示几行，但是会因为height过小，或者line-height过大显示不全，所以调试时要综合考量。