文本溢出显示省略号效果

在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 设置或检索伸缩盒对象的子元素的排列方式；

本文参考地址：https://www.html.cn/qa/css3/10509.html

文本溢出显示省略号效果相关推荐

html设置文字出现效果,文本溢出显示省略号效果怎么实现？
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
CSS文本溢出显示省略号怎么实现？
前言我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号代码示例: <!D ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
CSS实现文本溢出显示省略号
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

文本溢出显示省略号效果

文本溢出显示省略号效果相关推荐

最新文章

热门文章