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