关于文字单行显示省略号和多行省略号的写法

标签：

     CSS里的text-overflow属性能用来控制超长溢出的文字内容的显示方式，超出的文字可以是直接截断、用省略号表示，或用自定义的字符替代。

单行文字显示省略号条件：

    text-overflow的起作用环境是在一个‘block’状态下的父元素容器里，它的inline子元素上水平方向不能换行（即white-space: nowrap;），这种情况下用text-overflow:ellipsis属性，即可将单行文字超出规定宽度显示省略号。

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;  
  text-overflow: ellipsis;
}

    text-overflow还有另一个值，就是clip，这个值作用是切断超出的文字不显示，就不做过多解释了。

    当然，单行文字显示省略号很简单，可是要实现多行文字显示省略号，不能自己手动加省略号，太自欺欺人了。那么要怎么实现呢。

方法：

    用Webkit引擎里提供了一个控制多行文本超出溢出控制显示CSS属性：-webkit-line-clamp: n;

p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: n; /* 控制显示的行数 */
   line-height: i;        /* 对不支持浏览器的 */
   max-height: i*n;       /* 对不支持浏览器的弥补 */
}

   在别的内核浏览器下想实现此功能写法：

.max-lines {
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

关于文字单行显示省略号和多行省略号的写法

标签：

原文地址：http://www.cnblogs.com/dreamelapse/p/5371833.html