在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望对大家有所帮助。
想要实现文本溢出显示省略号效果其实很简单,可以使用text-overflow: ellipsis;和overflow:hidden;并辅助其他的一些CSS样式来完成。overflow:hidden;表示不显示超过对象尺寸的内容,也就是把超出的部分隐藏;text-overflow: ellipsis;表示当文本溢出包含元素时使用省略符号来代表被修剪的文本。
文本溢出显示省略号效果可以分为两种:
● 单行文本溢出显示省略号:这种都应用于标题中,当标题过长,可以将超出部分用省略号(....)来显示。
● 多行文本溢出显示省略号:这种都应用于描述中,当描述内容过多,无法一次全部显示,就可以将超出部分用省略号(....)来显示。
下面我们通过示例来看看实现方法
示例1:单行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出部分显示省略号</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 300px;/*指定宽度*/
height: 100px;
margin: 50px auto;
padding: 10px 0px;
border: 1px dashed palevioletred;
}
h2 {
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*规定段落中的文本不进行换行 */
text-overflow: ellipsis;/* 超出部分显示省略号 */
-o-text-overflow: ellipsis;/* 超出部分显示省略号 */
}
h3 {
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*规定段落中的文本不进行换行 */
text-overflow: ellipsis;/* 超出部分显示省略号 */
-o-text-overflow: ellipsis;/* 超出部分显示省略号 */
}
</style>
</head>
<body>
<div class="box">
<h2>css 实现单行文本超出长度显示省略号</h2><br />
<h3> css 实现单行文本超出长度显示省略号</h3>
</div>
</body>
</html>
效果图:
说明:
white-space: nowrap;用于指定段落中的文本不进行换行,这样超出的文本就不会在下一行显示。
示例2:多行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出部分显示省略号</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
width: 280px;
height: 70px;
margin: 50px auto;
font-size: 20px;
border: 1px dashed palevioletred;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css 实现多行文本溢出部分显示省略号,css 实现多行文本溢出部分显示省略号,
css 实现多行文本溢出部分显示省略号
</div>
</body>
</html>
效果图:
说明:
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中;
display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ;
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ;