溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css怎么實現單行文本超出省略號”，在日常操作中，相信很多人在css怎么實現單行文本超出省略號問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css怎么實現單行文本超出省略號”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
css實現單行文本的溢出顯示省略號應該用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。
css單行文本超出省略號的實現代碼：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=utf-8">
<title>省略號test</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#test{
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:nowrap;
*white-space:nowrap;
overflow:hidden;
border:1pxsolid#999;
}
#testspan{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
</style>
</head>
<body>
<divid="test">php中文網php中文網php中文網php中文網php中文網php中文網php中文網</div>
</body>
</html>
css單行文本超出省略號的效果如下：
2345截圖20180919100533.png
text-overflow:ellipsis屬性只支持單行文本的溢出顯示省略號，如果我們要實現多行文本溢出顯示省略號呢？下面我們就繼續說css實現多行文本超出省略號的方法。（text-overflow:ellipsis屬性更多內容可參考css手冊）
1、css實現多行文本超出省略號之直接用css屬性設置(只有-webkit內核才有作用)
語法：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
移動端瀏覽器絕大部分是WebKit內核的，所以該方法適用于移動端；
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性（unsupportedWebKitproperty），它沒有出現在CSS規范草案中。
display:-webkit-box將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient設置或檢索伸縮盒對象的子元素的排列方式。
text-overflow:ellipsis以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本。
2、css實現多行文本超出省略號之利用絕對定位和padding;(跨瀏覽器解決方案)
語法：
p{
position:relative;
line-height:20px;
max-height:40px;
overflow:hidden;
}
p::after{
content:"...";
position:absolute;
bottom:0;
right:0;
padding-left:40px;
background:-webkit-linear-gradient(left,transparent,#fff55%);
background:-o-linear-gradient(right,transparent,#fff55%);
background:-moz-linear-gradient(right,transparent,#fff55%);
background:linear-gradient(toright,transparent,#fff55%);
}
這個方法的原理是：首先在包含文字的元素里，嵌入一個<span>...</span>，然后包含文字的元素右側留出...的位置(padding-right),最后利用絕對定位將...定位至右側的padding-right區域。
說明：該方法適用范圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注意：
將height設置為line-height的整數倍，防止超出的文字露出。
給p::after添加漸變背景可避免文字只顯示一半。
由于ie6-7不顯示content內容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。
到此，關于“css怎么實現單行文本超出省略號”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
