怎樣隱藏文本的超出部分

這次給大家帶來怎樣隱藏文本的超出部分，隱藏文本超出部分的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

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;}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS實現3d半透明立方體

CSS3實現進度條的倆種方法

在CSS實現Footer置底的幾種方式