在 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 设置或检索伸缩盒对象的子元素的排列方式 ;
来源: http://www.css88.com/qa/css3/10509.html