文本溢出效果

文本溢出效果

项目中有些段落内容不需要完全显示，但还要可以显示出来，多余内容隐藏中通过…显示，可以通过css或者js控制字数显示。
一、css3文本溢出效果
（1）单行文本溢出效果

  .text{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap
    }

(2)多行文本溢出

    .text{
       overflow: hidden;
       text-overflow: ellipsis;
        -o-text-overflow:ellipsis;
      -webkit-text-overflow:ellipsis;
       -moz-text-overflow:ellipsis;
        display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
        white-space: normal;
      }

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

示例
多行文本溢出多行文本溢出多行文本溢出
多行文本溢出多行文本溢出多行文本…
但要注意当文本对齐方式设置为text-align:justfy；的时候，可能出现省略号挤到文字里面的问题，所以不要设置这种对齐方式
结合jquery控制-webkit-line-clamp所设置的行数可以实现文本的折叠与展开
二、通过js/jquery设置
（未完待续）