- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- HTML中怎样将文字转省略号，使用什么方法
HTML中怎样将文字转省略号，使用什么方法
Admin 2022-07-05 群英技术资讯 1556 次浏览
今天这篇我们来学习和了解“HTML中怎样将文字转省略号，使用什么方法”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“HTML中怎样将文字转省略号，使用什么方法”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！在html中如果要把多余的文字显示为省略号，那么有以下几种方法：
单行文本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
background-color: aqua;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="box">讲的是克辣椒的洒落看见斯科拉讲的是拉开讲的是了卡机快来撒建档立卡时间到了撒快乐到家撒了看见撒快乐到家撒健康了</div>
</body>
</html>
多行文本：
1.利用-webkit-line-clamp属性
.box{
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border:solid 1px black;
}
缺点：仅适用于webkit内核或移动端页面。在火狐，ie等浏览器并不支持。
2.用伪元素模拟实现
设定固定宽高，多余部分隐藏，在结尾用包含省略号（...）的元素覆盖部分内容。
.box{
height: 200px;
width: 200px;
position:relative;
line-height:1.4em;
height:4.2em;
overflow:hidden;
}
.box::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 -20px 1px 45px;
background-color:white;
}
这里用一个包含了省略号，且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
这种思路实现较为简单，兼容性也比较好。
注:如果要兼容ie6或7，则不能使用伪元素，可以使用一个<div>或者<span>标签。如果要支持ie8，需要将::after写成:after。
现在大家对于HTML中怎样将文字转省略号，使用什么方法的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS设置浮动能解决什么问题，如何消除浮动影响
浮动的定义，设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘。浮动解决的问题，解决文字包围图片的问题；解决间隔问题；可以向左，或者向右排版将文字排版到图片左端。
-
HTML元素基本标签包括哪些，功能及用法是什么
HTML元素基本标签包括哪些，功能及用法是什么
-
如何快速掌握动画的调用及多关键帧动画的实现
本篇文章给大家带来关于css中动画的相关知识，其中包括什么是动画，动画的调用以及多关键帧动画应该怎样实现，希望对你有帮助。
-
新手怎么理解CSS选择器的关系
父元素： 直接包含其他元素，这个元素就是包含元素的父元素。祖先元素：包含其他元素，这个元素就是包含元素的祖先元素。子元素： 直接被包含的元素。后代元素： 被包含的元素。
-
CSS元素居中有多少方法，分别是什么
CSS元素居中有多少方法？在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
