css 单行、两行 或 多行显示不下 省略号...表示实现

• 单行：限制文字 一行显示不下时，用省略号‘...’表示
  •  方法一：

    .test {

      /* 溢出隐藏 */

      overflow: hidden;

      /* 限制一行显示 */

      white-space: nowrap;

      /* 显示不下省略号显示 */

      text-overflow: ellipsis;

•  方法二：：

• 两行：限制文字 两行显示不下时，用省略号‘...’表示

  • .test {

      overflow: hidden;

      display: -webkit-box;

      -webkit-box-orient: vertical;

      -webkit-line-clamp: 2;

效果图：

•  四行