深入瞭解css樣式之超出隱藏總結

文本超出部分隱藏，總結兩種方法。

1、單行隱藏

html代碼

<p class="mi">當文字超過範圍的時候，超出部分會隱藏起來。</p>

css代碼

.mi {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}

結果

當文字超過範圍的時候，超出部分會隱藏起來。

2、多行隱藏

html代碼

<p class="mi">當文字超過範圍的時候，超出部分會隱藏起來。可以設定第幾行開始隱藏。</p>

css代碼

.mi {width: 200px;overflow: hidden;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

結果

當文字超過範圍的時候，超出部分會隱藏起來。可以設定第幾行開始隱藏。