css案例10——单行文本省略、多行省略、元素多行省略

已于 2024-03-28 16:09:03 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： CSS 文章标签： css html
于 2022-06-11 14:59:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xulihua_75/article/details/125234752
版权

一、案例描述

1.默认：

请添加图片描述

2.单行省略

请添加图片描述

3.多行省略

请添加图片描述

二、案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="shortcut icon" href="./favicon.ico" />
		<style>
			.txt {
				width: 400px;
				height: 200px;
				line-height: 30px;
				border: 1px solid red;
				/* 单行省略 */
				/* white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis; */
				/* 多行省略 */
				/* display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical; */

			}
		</style>
	</head>
	<body>
		<div class="txt">
			我曾经是个沉默的人，这就是说，我不喜欢在各种会议上发言，也不喜欢写稿子。这一点最近已经发生了改变，参加会议时也会发言，有时也写点稿。对这种改变我有种强烈的感受，有如丧失了童贞。这就意味着我违背了多年以来的积习，不再属于沉默的大多数了。
			--王小波 《理想国与哲人王》
		</div>
	</body>
</html>

单行省略：

/* 单行省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行省略：

/* 多行省略 */
word-break: break-all; //内部单词换行
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
或
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; 

/* 元素多行省略 */
height:80px;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
耶啵奶膘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现单行、多行文本溢出显示省略号（…）
07-26
CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
通过纯CSS样式实现DIV元素中多行文本超长自动省略号
09-25
【纯CSS实现多行文本超长自动省略号】是一种高效且优雅的解决方案，它可以避免使用JavaScript进行文本截断，从而提高页面加载速度和用户体验。CSS中的`text-overflow: ellipsis`属性是实现这一效果的关键，但它仅...
实现单行／多行文本溢出的省略样式（多种实现方式）
贫僧法号依平
02-18 1208
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号单行文本溢出多行文本溢出。
前端 CSS 经典：省略号
weixin_64684095的博客
11-20 1614
单行省略，双行省略，通用省略
css文字超出元素省略,单行、多行省略
最新发布
阿乐的博客
06-05 543
通用CSS。
CSS基础之省略号的制作（单行&多行）
m0_48749505的博客
03-17 1071
例如：相信很多小伙伴在初学css绘制页面时，都会遇见文本超出指定区域，用...代替的情况；下面详细为大家介绍了单行文本如何制作省略号以及多行文本如何制作省略号。
CSS显示省略号
sun~的博客
10-17 528
CSS显示省略号
css3单行省略和多行省略
LiuHB_的博客
09-17 792
若设置text-overflow: ellipsis;/* 设置伸缩盒子对象的子元素的排列方式 *//* 文本不会换行，会在在同一行上继续 *//* 文本不会换行，会在在同一行上继续 *//* 指定应向用户如何显示溢出内容 *//* 指定应向用户如何显示溢出内容 *//* 对象作为弹性盒子模型显示 *//* 设置块元素包含的文本行数 *//* 设置文本的宽度 *//* 设置文本的宽度 *//* 溢出隐藏 *//* 溢出隐藏 *//* 溢出隐藏 */
css超出部分显示省略号
富朝阳的博客
03-11 1689
CSS文本溢出就显示省略号，就是在样式中指定了盒子的宽度与高度,有可能出现某些内容在盒中容纳不下的情况，我们需要文本溢出就显示省略号。
单行文本与多行文本溢出时显示省略号的CSS设置
06-11
此时，CSS（Cascading Style Sheets）提供了一种优雅的解决方案，即在文本溢出时显示省略号，这在单行文本和多行文本中都有应用。本篇将详细讲解如何使用CSS来实现这一功能。 首先，让我们关注单行文本的处理。在...
CSS实现单行、多行文本溢出显示省略号的实现方法
09-22
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览
微信小程序实现多行文字超出部分省略号显示功能
10-16
在CSS中，我们可以利用`-webkit-line-clamp`属性来限制元素显示的文本行数，以及`overflow`和`text-overflow`属性来处理超出内容的显示方式。 在样式文件`.wxss`中，我们可以定义如下的样式： ```css ....
如何让多行文本出现省略号？
ACV程序猿的博客
08-09 2847
在很多时候，我们写页面时，当我们的文本过多时，太多文字会影响页面的美观，这时我们就要学会压缩文本，省略掉多余的文本，下面我要讲的是，如何让多余文本省略。 首先要认识以下的属性： 1.text-overflow:ellipsis;这是溢出文本显示省略号的必要属性。 2、容器宽度：width：value；（px、%，都可以）（必须要有宽度）； 3、主要是控制父容器里面子元素的排列方式 ：display: -webkit-box; 4、实现...
Css实现...省略号的效果
weixin_50643343的博客
01-08 5289
介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法。是叭，我们给div加上overflow：hidden会隐藏掉，但是不太美观就需要用到省略号。还是先写基础代码，我们这次的div高度要大一些。本文分为单行省略号的实现和多行省略号的实现。
css 显示省略号 和 动态显示省略号
ScottePerk的博客
06-29 1345
省略是非常常见的功能。
CSS中 设置( 单行、多行 )超出显示省略号
热门推荐
明天也要努力的博客
12-05 13万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
单行文本溢出和多行文本溢出，如何加省略号
qq_44890362的博客
01-07 227
1.单行省略 .single{ width: 100px; height: 40px; background-color: aquamarine; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 2.多行省略 .double
实现单行文本省略和多行省略
weixin_30897233的博客
07-18 411
单行文本溢出省略 （有时需要加宽度width属性来兼容部分浏览器） 实现代码 overflow: hidden; text-overflow: ellipsis; white-space: nowrap 多行文本溢出省略-webkit-line-clamp是控制行数 实现代码 display: -webkit-box; -webkit-b...
前端页面中文本标签单行省略以及多行省略
weixin_42136785的博客
07-24 1455
前端页面中文本标签单行省略以及多行省略 在最初的切图生涯中，页面上的很多文本内容或多或少，有时候就是要求超出部分显示为省略号，当然也可能会要求为单行溢出或多行溢出。 单行溢出的话： width:value; //定义容器宽度 white-space:nowrap; //强制文本在单行显示 overflow:hidden; //溢出隐藏 text-...
css实现单行和多行文本溢出显示省略号问
08-23
可以使用CSS的text-overflow属性来实现单行和多行文本的溢出显示省略号。 对于单行文本溢出显示省略号，可以使用以下样式： ```css .single-line { white-space: nowrap; /* 让文本不换行 */ overflow: hidden; /* 隐藏溢出部分的文本 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 对于多行文本溢出显示省略号，可以结合使用CSS的属性-webkit-line-clamp和display: -webkit-box来实现： ```css .multi-line { display: -webkit-box; /* 将容器视为一个弹性伸缩盒子 */ -webkit-line-clamp: 3; /* 最多显示3行文本 */ -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素垂直排列 */ overflow: hidden; /* 隐藏溢出部分的文本 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 以上代码中的`.single-line`和`.multi-line`分别是要应用样式的文本容器的类名。根据需要，你可以将这些样式类应用到相应的HTML元素上。 注意：`-webkit-line-clamp`属性在一些浏览器（例如Chrome和Safari）中可以正常工作，但在其他浏览器中可能不起作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值