文本折行与不折行，多行文本折行。单行文本折行。

单行文本折行
- 不折行一直显示横向会出现滚动条

 #son{
      width: 100px;
      height: 60px;
      white-space:nowrap;
     }

    <p id="son">我爱我的祖爱我的祖国我爱我的祖国我爱我的祖国爱我的祖国我爱我的祖国我爱我的祖国我爱我的祖国我爱我的祖国我爱我的祖国</p>

• 单行显示有···
  text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样 才能实现溢出文本显示省略号的效果。

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

<p id="son">我爱我的祖爱我的我的祖国爱我的爱我的祖国我爱我的祖国爱我的祖国我我我的</p>

多行文本折行

.breaking{overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}