css处理超出文本截断问题的两种情况（多行或者单行）

1.非多行的简单处理方式：

　　css代码

　　　　.words{

　　　　　　width：400px;

　　　　　　  overflow:hidden;  /*超过部分不显示*/
  　　　　　　text-overflow:ellipsis;  /*超过部分用点点表示*/
  　　　　　　white-space:nowrap;/*不换行*/

　　　　}

　　html代码/*

　　<div class="words">
   　　For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.
  　</div>

2.规定行数的截断处理方式

　　css代码

　　　　.words{

　　　　width：400px;

　　　　text-overflow: ellipsis; /*有些示例里需要定义该属性，实际可省略*/
  　　　display: -webkit-box;
  　　　-webkit-line-clamp: 2;/*规定超过两行的部分截断*/
 　　　 -webkit-box-orient: vertical;
 　　　overflow : hidden; 
  　　  word-break: break-all;/*在任何地方换行*/

　　　　}

转载于:https://www.cnblogs.com/zhangmei/p/5866510.html