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;/*在任何地方换行*/
}