CSS3属性中的text-overflow:ellipsis详解
生活随笔
收集整理的這篇文章主要介紹了
CSS3属性中的text-overflow:ellipsis详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
語法：
text-overflow:clip | ellipsis
默認值為clip 不顯示省略標記
clip:當前對象內文本溢出時不顯示省略標記,而是將溢出部分裁剪。
ellipsis:當對象內文本一處時顯示省略標記(...)。
一、常見的單行文本溢出顯示省略寫法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p{
width: 100px;
height: 40px;
line-height: 40px;
text-overflow: ellipsis; /*1*/
overflow: hidden; /*2*/
white-space: nowrap; /*3*/
word-break: break-all;
}
</style>
<body>
<p class="e9bd-a3fc-f399-4c4f p">多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示</p>
</body>
</html>
二、多行文本溢出
WebKit瀏覽器有一個-webkit-line-clamp的屬性，用這個即可以實現webkit內核的瀏覽器、以及大部分移動端的多行文本溢出省略號；
display:-webkit-box;
-webkit-line-clamp: 3/*第幾行裁剪*/
-webkit-box-orient:vertical;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p {
height: 60px;
line-height: 30px;
width: 80px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; /*1*/
-webkit-line-clamp: 2; /*2*//*第幾行裁剪*/
-webkit-box-orient: vertical; /*3*/
}
</style>
<body>
<p class="4c4f-601f-2555-4ee4 p">多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示多示</p>
</body>
</html>
其它瀏覽器的話就需要通過js實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
p{
height: 60px;
}
p {
line-height: 30px;
width: 80px;
margin: 0 auto;
}
</style>
<body>
<p id="p">
<p id="p">多行文本溢出顯示多行文本溢出顯示多行文本溢行文本溢示</p>
</p>
</body>
<script type="text/javascript">
var eleH = document.getElementById("p").clientHeight;
var pEle = document.getElementById("p");
while(pEle.clientHeight > eleH) {
pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
};
</script>
</html>
到此這篇關于CSS3屬性中的text-overflow:ellipsis詳解的文章就介紹到這了,更多相關css3 text-overflow:ellipsis屬性內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
總結
以上是生活随笔為你收集整理的CSS3属性中的text-overflow:ellipsis详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 优衣库、哆啦A梦联名T恤来了：79元起售
- 下一篇： 轻松搞定！打开雅马哈音箱蓝牙，手机秒变音