多行文字顯示省略號

2021-09-19 13:01:02 字數 517 閱讀 5851

單行文字溢位顯示省略號:

核心css語句:

1、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)

2、white-space: nowrap; (設定文字在一行顯示不能換行)

3、text-overflow: ellipsis;(規定當文字溢位時顯示省略符號來代表被修剪的文字)

多行文字溢位顯示省略號

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden

overflow: hidden;

text-overflow: ellipsis;

word-wrap: break-word;

white-space: normal !important;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

多行文字溢位顯示省略號

這裡是i喵醬,這個是乙個多行超出換行的小demo,看這裡看這裡 overflow hidden 內容會被修剪,超出隱藏。text overflow ellipsis 超出範圍顯示 display webkit box 把物件轉換成彈性盒模型 webkit box orient vertical 設定...

多行文字溢位顯示省略號

大家應該都知道用text overflow ellipsis屬性來實現單行文字的溢位顯示省略號 當然部分瀏覽器還需要加寬度width屬性。css overflow hidden text overflow ellipsis white space nowrap 但是這個屬性並不支援多行文字溢位顯示省...

多行文字溢位顯示省略號

大家應該都知道用text overflow ellipsis屬性來實現單行文字的溢位顯示省略號 當然部分瀏覽器還需要加寬度width屬性。overflow hidden text overflow ellipsis white space nowrap 但是這個屬性並不支援多行文字溢位顯示省略號,這...