css3 常用命令总结（不定期更新）

1、多行文字溢出自动加载省略号效果

    单行文字溢出省略效果比较简单，代码如下：

<pre name="code" class="html"><p class="dome1">文字这是一行宽度溢出的文字这是一行宽度溢出的文字</p>

    .dome1{
width:100px;
overflow:hidden;  /* 溢出部分隐藏*/
white-space:nowrap;   /*设置文字强制不换行*/
text-overflow:ellipsis; /*添加省略号效果*/
}

显然该效果只有文字宽度超过标签元素的宽度才会有用，如果应用在块级元素时，最好设置宽度或者给它的父级元素设置宽度；如果应用在行内元素的话需要为该元素设置display: block; 或 display: inline-block; 并给该元素或者它的块级父元素设置宽度，该效果才会生效。

    多行文字溢出省略效果是css3 的属性，在手机开发的时候经常用到，针对webkit内核，代码如下： 
   

<pre name="code" class="html"><p class="dome2">文字这是一行宽度溢出的文字这是一行宽度溢出的文字</p>

	.dome2{
    width: 100px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

说明如下：查看来源点这里

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。