CSS3属性中的text-overflow:ellipsis详解
发布时间：2023-08-07 16:01:15 作者：要努力奋斗鸭 
我要评论
我要评论这篇文章主要介绍了CSS3属性中的text-overflow:ellipsis详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
语法：
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="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="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
</body>
</html>其它浏览器的话就需要通过js实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
div{
height: 60px;
}
p {
line-height: 30px;
width: 80px;
margin: 0 auto;
}
</style>
<body>
<div id="div">
<p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
</div>
</body>
<script type="text/javascript">
var eleH = document.getElementById("div").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中通过transition属性可以实现一些简单的动画过渡效果，今天通过本文给大家介绍下css3中transition属性的示例代码，感兴趣的朋友跟随小编一起看看吧2022-02-18- 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。本文就详细的介绍了这4种实现，感兴趣的可以了解一下2021-08-05
- 这篇文章主要介绍了css3 filter属性的使用简介，帮助大家更好的理解和学习使用css3，感兴趣的朋友可以了解下2021-03-30
- 这篇文章主要介绍了详解CSS3：overflow属性的相关资料，帮助大家更好的理解和制作CSS3特效，感兴趣的朋友可以了解下2020-11-17
这篇文章主要介绍了background属性的8个属性值(面试题)，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-11-02
最新评论