文本溢出显示省略号效果

最新推荐文章于 2024-11-24 10:21:17 发布

想出轨的电动车

最新推荐文章于 2024-11-24 10:21:17 发布

阅读量428

点赞数

分类专栏：前端 CSS 文章标签：文本溢出省略号 CSS

原文链接：https://www.html.cn/qa/css3/10509.html

版权

前端同时被 2 个专栏收录

33 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

在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>

效果图：