单、多文本溢出隐藏用省略号代替

最新推荐文章于 2024-06-05 09:45:20 发布

dequan li

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量674

点赞数

分类专栏： HTML css 文章标签： css html

本文链接：https://blog.csdn.net/qq_48729513/article/details/121876963

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

单行&多行文本溢出时隐藏且省略号代替

单行文本溢出：

单行文本隐藏溢出用省略号代替写法：三件套

1、设置文本不换行
white-space: nowrap;

2、设置溢出部分隐藏
overflow: hidden;

3、设置溢出部分用省略号代替
text-overflow: ellipsis;

		<style type="text/css">
			.el{
				width: 100px;
				height: 100px;
				background-color: red;
				
				/* 设置文本不换行 */
				white-space: nowrap;	
				/* 设置溢出部分隐藏 */
				overflow: hidden;
				/* 设置溢出部分用省略号代替 */
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<!-- 单行文本溢出隐藏，用省略号表示 -->
		<div class="el">
			《三毛从军记》是根据作家张乐平的同名漫画改编、由
			上海电影制片厂出品的喜剧电影。
		</div>
	</body>

在这里插入图片描述

但当文字放在span这种块级盒子里会出现下面的效果：
在这里插入图片描述
因为块级盒子是有内容撑开的，所以在这种时候要把块级盒子变成行盒。

display: block;

多行文本溢出

多行文本溢出需要使用浏览器内核 -webkit 属性，我们常规的属性是搞不定的，写法如下：

			.el{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.spanel{
				/* display: block; */
				/* 设置文本不换行 */
				/* white-space: nowrap;	 */
				/* 设置溢出部分隐藏 */
				overflow: hidden;
				/* 设置溢出部分用省略号代替 */
				text-overflow: ellipsis;
				
				/* 设置多行溢出隐藏 */
					/* 先设置盒子模型为基于浏览器内核的-webkit-box */
					display: -webkit-box;
					/* 设置对齐模式 */
					-webkit-box-orient: vertical;
					/* 设置盒子内容显示的行数 */
					-webkit-line-clamp: 2;
			}
		</style>
	</head>
	<body>
		<div class="el">
			<span class="spanel">
				《三毛从军记》是根据作家张乐平的同名漫画改编、由上海电影制片厂出品的喜剧电影。
			</span>
		</div>

在这里插入图片描述

dequan li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单、多文本溢出隐藏用省略号代替

单行文本溢出时隐藏且省略号代替实例：单行文本隐藏溢出用省略号代替写法：三件套1、设置文本不换行white-space: nowrap;2、设置溢出部分隐藏overflow: hidden;3、设置溢出部分用省略号代替text-overflow: ellipsis; <style type="text/css"> .el{ width: 100px; height: 100px; background-color: red;
复制链接

扫一扫