CSS 笔记 - liuxiaofei2010S/special-column GitHub Wiki

  <div>
    <p>
       <span>白日依山尽，黄河入海流</span>
    </p>
  </div>

 div {
    width: 200px; 
    height: 200px;
    background-color: #eee;
 }
 /* IE下的样式 */
 p span {
   display: block;
   width: 200px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }

 /* FF 下的样式 */
p {
  clear: both;
  &:after {
    content: "...";
  }
  span {
    float: left;
    max-width: 175px; /*IE不能解释该属性，而FF可以*/
  }
}

div {
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 6; /** 显示的行数 **/
  overflow: hidden;
}

  span {
    animation: slideOut 0.3s;
    -moz-animation: slideOut 0.3s; /* Firefox */
    -webkit-animation: slideOut 0.3s; /* Safari 和 Chrome */
    -o-animation: slideOut 0.3s; /* Opera */
  }

  @keyframes slideOut {
    from {
      right: 3px;
    }
    to {
      right: 48px;
    }
  }

  @-moz-keyframes slideOut /* Firefox */
  {
    from {
      right: 3px;
    }
    to {
      right: 48px;
    }
  }

  @-webkit-keyframes slideOut /* Safari 和 Chrome */
  {
     from {
       right: 3px;
     }
     to {
       right: 48px;
     }
  }

  @-o-keyframes slideOut /* Opera */
  {
     from {
       right: 3px;
     }
     to {
       right: 48px;
     }
  }

background-position: 0px center;