CSS文本超出后隱藏并顯示省略號(hào)及其他瀏覽器兼容方案(推薦)
我要評(píng)論廢話不多說，先上代碼！
1、只顯示一行文字后隱藏并省略
// 只顯示一行文字后省略
.element {
width: 300px; /* 需要設(shè)置一個(gè)固定寬度 */
white-space: nowrap; /* 強(qiáng)制單行顯示，不換行 */
overflow: hidden; /* 超出盒子部分隱藏 */
text-overflow: ellipsis; /* 超出部分顯示省略號(hào) */
}2、顯示指定行數(shù)文字后隱藏并省略
// 顯示多行文字后省略
.element {
width: 300px; /* 需要設(shè)置一個(gè)固定寬度 */
display: -webkit-box; /* 使用彈性盒布局 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 3; /* 顯示三行 */
overflow: hidden; /* 超出盒子部分隱藏 */
text-overflow: ellipsis; /* 超出部分顯示省略號(hào) */
}多行文本省略，通過使用 display: -webkit-box; 彈性盒子布局，配合 -webkit-line-clamp 實(shí)現(xiàn)多行文本截?cái)唷?br />注：這套方法適用于 WebKit 內(nèi)核瀏覽器（如 Chrome、Safari 等）。對(duì)于其他瀏覽器，可能需要額外的 polyfill 支持。
其他解決方案
1、使用 JavaScript 動(dòng)態(tài)地計(jì)算文本內(nèi)容的高度并進(jìn)行截?cái)唷?/strong>
2、使用已有的庫：如：Clamp.js
Clamp.js：一個(gè)輕量級(jí)的庫，用于實(shí)現(xiàn)跨瀏覽器的多行文本截?cái)唷?/p>
//單行
$clamp(myHeader, {clamp: 1});
//多行
$clamp(myHeader, {clamp: 3});
//根據(jù)可用高度自動(dòng)計(jì)算行數(shù)
$clamp(myParagraph, {clamp: 'auto'});
//根據(jù)固定高度自動(dòng)計(jì)算行數(shù)
$clamp(myParagraph, {clamp: '35px'});3、CSS Fallback（部分兼容方案）
對(duì)于某些瀏覽器，雖然沒有直接支持 -webkit-line-clamp 的屬性，但我們可以結(jié)合一些簡單的 CSS 來實(shí)現(xiàn)近似效果。
.element {
display: block; /* 顯示為塊 */
overflow: hidden; /* 隱藏超出內(nèi)容 */
text-overflow: ellipsis; /* 超出部分顯示省略號(hào) */
line-height: 1.5em; /* 設(shè)置行高 */
max-height: 4.5em; /* 3行的最大高度，3行 * 1.5行高 = 4.5em */
white-space: normal; /* 保持正常的文本換行 */
}這種方案雖然無法在所有情況下實(shí)現(xiàn)精確的多行截?cái)?，但在支持基本的多行文本省略顯示方面仍然適用。
到此這篇關(guān)于CSS文本超出后隱藏并顯示省略號(hào)及其他瀏覽器兼容方案的文章就介紹到這了,更多相關(guān)CSS文本超出隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS文本超出2行就隱藏并且顯示省略號(hào)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-01
CSS文本超出指定寬度后隱藏并顯示為省略號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS文本超出指定寬度后隱藏并顯示為省略號(hào)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-24CSS控制文本超出指定寬度顯示省略號(hào)和文本不換行效果的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狢SS控制文本超出指定寬度顯示省略號(hào)和文本不換行效果的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05CSS文本超出div或者span時(shí)用省略號(hào)代替
在項(xiàng)目中我們經(jīng)常需要在文本過長時(shí)顯示，將文本超出的部分內(nèi)容用省略號(hào)代替，基于css代碼是怎么實(shí)現(xiàn)的呢？下面腳本之家小編通過分析本文給大家詳解，感興趣的朋友一起學(xué)習(xí)2016-01-19css實(shí)現(xiàn)li中文本超出行寬自動(dòng)隱藏
li中的文本超出行寬自動(dòng)隱藏，在一些新聞?lì)惖牧斜響?yīng)用中還是比較實(shí)用的，具體的實(shí)現(xiàn)css樣式如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-29- 用到了width、white-space:nowrap;overflow:hidden;text-overflow:ellipsis等屬性，其中width就是指定的長度2014-09-21
CSS 超出隱藏實(shí)現(xiàn)限制字?jǐn)?shù)的功能代碼(多瀏覽器)
用時(shí)候?yàn)榱擞兴阉饕娓矚g網(wǎng)站，限制字?jǐn)?shù)截取標(biāo)題都是好辦法。一般用超出隱藏，以免影響了整體布局。下面是多種瀏覽器下的寫法。2009-12-21