css实现文本多行省略

最新推荐文章于 2023-06-01 20:00:55 发布
最新推荐文章于 2023-06-01 20:00:55 发布
阅读量719 收藏
点赞数
分类专栏： html css 文章标签： css 文本省略
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29457999/article/details/73277866
版权
html 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏

当行省略兼容ie，多行省略暂时不兼容ie


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title>多行省略</title>
	</head>
	<style>
		.flex{
			display: -webkit-box-flex;
			display: -webkit-flex;
			display: -webkit-box;
			display: -moz-box-flex;
			display: -ms-flex;
			display: flex;
		}
		.flex-1{
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-webkit-box: 1;
			-moz-box-flex: 1;
			-ms-flex: 1;
			flex: 1;
		}
		.tab{
			flex-wrap: wrap;
		}
		.item{
			width: 400px;
			border: 1px solid yellow;
		}
		.item-left{
			width: 100px;
			height: 100px;
			border: 1px solid #efefef;
		}
		.item-right{
			disabled:  -webkit-flex;
		}
		.ellipsis1{
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.ellipsis2{
			height: 36px;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	</style>
	<!--[if gt IE 8]>
	<style>
		.ellipsis1{
			white-space: nowrap;
		}
	</style>
	<![endif]-->
	<body>
		<div class="tab flex">
			<div class="item flex">
				<div class="item-left">
					
				</div>
				<div class="item-right flex-1">
					<div class="name">单行省略（兼容ie）</div>
					<div class="info ellipsis1">冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于</div>
					<div class="sale">23.3</div>
				</div>
			</div>
		</div>
		<div class="tab flex">
			<div class="item flex">
				<div class="item-left">
					
				</div>
				<div class="item-right flex-1">
					<div class="name">多行省略（不兼容ie）</div>
					<div class="info ellipsis2">冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于冰镇咖啡源于</div>
					<div class="sale">23.3</div>
				</div>
			</div>
			<div class="item flex">
				<div class="item-left">
					
				</div>
				<div class="item-right flex-1">
					<div class="name">冰镇咖啡</div>
					<div class="info ellipsis2">固定行高</div>
					<div class="sale">23.3</div>
				</div>
			</div>
		</div>
	</body>
</html>





llkui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css文本篇--文本省略(单行/多行)
记录自己的学习和工作心得，欢迎交流。
07-14 2280
【代码】css文本篇--文本省略(单行/多行)
html多行文本省略,CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）
weixin_39736606的博客
06-15 430
前言多行文本一点框果域时近些，架为或还近些，架为或还超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果，但麻烦且不是很靠谱，今天就用纯CSS来实现一个完全兼容的多中各及，面发大广来大是切设近重种与都的经家告说效一换备近重种与都的经家告说效一换备近重种与都的经家告说效一换...
微信小程序——CSS限制文字宽度和行数（溢出显示省略号）
XSL_HR的博客
06-01 2878
手把手教你学会用CSS限制文字宽度和行数
css如何实现多行省略？
ysds20211402的博客
01-27 2550
转自：微点阅读 https://www.weidianyuedu.com/content/0717448004928.html 前言 这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案。 如果你看到这篇文章，可能代表你正是从那么多千篇一律的文章中跳转过来的，想找更好地方案的。那恭喜你，没有更好的，只有更合不合适的，当然，前提是我的文章流量够多，能被顶上去你才有机会看到。 这里介绍三...
CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号
01-08
当我们需要展示大量文本但受限于有限的空间时，可以利用CSS来实现文字的多行省略效果，让超出部分以省略号（...）的形式呈现。在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的...
css控制文本实现越界省略号以及自动换行
09-25
本篇将详细解释如何利用CSS实现文本的越界省略号显示以及自动换行。 首先，我们来看如何实现越界省略号的效果。这个效果通常用于长文本在有限的容器内无法完全展示时，用省略号(...)来表示文本被截断。关键的CSS...
CSS实现单行、多行文本溢出显示省略号（…）
07-26
CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
css多行文本溢出时出现省略号的示例
09-24
当文本内容过多，无法在指定的容器内完全展示时，可以使用CSS技术来实现多行文本溢出时显示省略号的效果。这既保持了设计的整洁性，又确保了主要内容的可读性。本文将介绍两种实现这一效果的方法。 方法一：CSS技巧...
通过纯CSS样式实现DIV元素中多行文本超长自动省略号
09-25
【纯CSS实现多行文本超长自动省略号】是一种高效且优雅的解决方案，它可以避免使用JavaScript进行文本截断，从而提高页面加载速度和用户体验。CSS中的`text-overflow: ellipsis`属性是实现这一效果的关键，但它仅...
css高级应用三种方法实现多行省略
weixin_33805557的博客
04-12 525
前言 这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案。 如果你看到这篇文章，可能代表你正是从那么多千篇一律的文章中跳转过来的，想找更好地方案的。那恭喜你，没有更好的，只有更合不合适的，当然，前提是我的文章流量够多，能被顶上去你才有机会看到。 这里介绍三种多行文本截断的方法，当然第一种就...
CSS基础之省略号的制作（单行&多行）
m0_48749505的博客
03-17 1067
例如：相信很多小伙伴在初学css绘制页面时，都会遇见文本超出指定区域，用...代替的情况；下面详细为大家介绍了单行文本如何制作省略号以及多行文本如何制作省略号。
css实现多行文本时显示省略号
qq_46112274的博客
04-20 6546
1、效果 效果图如下，系统首页新闻部分，要求只显示摘要部分的前三行数据，多余的数据省略。 2、HTML代码 红框内为从数据库查询出来的新闻摘要信息 3、CSS代码 主要代码如下： .core-text{ color: #999; font-size: 14px; line-height: 150%; //padding: 6px 0px; width: 100%; overflow : hidden; display: -webkit-box; /*弹性伸缩盒子*/ -webki
CSS3 - 文本超出隐藏显示省略号（单行 / 多行）
王佳斌
07-25 6079
单行 如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当然还需要加宽度 width 属来兼容部分浏览。 /* 注意需要给width 注意还需要把容器变为块级元素(因为需要给宽度) */ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果图： 适用范围：因使用了 WebKit 的 CSS 扩展属性，该方法适用于 WebKit 浏览器及移动端。 注意事项： Lis
css 多行文本溢出显示省略号(…)全攻略
Code-lover's Learning Notes
07-23 5849
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。overflow: hidden; text-overflow: ellipsis; white-space: nowrap;但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。WebKit浏览器或移动端的页面在WebK
CSS多行省略
mar5342的博客
10-22 838
CSS多行省略 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
css文字两行或者几行显示省略号
热门推荐
楠的博客
06-07 3万+
一行显示否则省略号 .line-clamp1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } 两行显示多则显示省略号 .line-clamp2 { overflow: ...
css实现多行文字省略号
sinat_41747081的博客
08-14 1148
我这里实现在第二行使用省略号，代码为： 实现效果为： 这个方法有个缺点：只合适WebKit浏览器或移动端，而且如果使用省略号的盒子使用定位，就不会出现省略号了。 ...
css文本多行溢出省略号
最新发布
08-16
您可以使用CSS的`text-overflow`属性来实现文本多行溢出省略号的效果。以下是一种常见的实现方式： ```css .overflow-ellipsis { white-space: nowrap; /* 不换行 */ overflow: hidden; /* 隐藏溢出的部分 */ text-overflow: ellipsis; /* 显示省略号 */ display: -webkit-box; /* 为了支持多行溢出 */ -webkit-line-clamp: 2; /* 显示的行数 */ -webkit-box-orient: vertical; /* 垂直方向排列 */ } ``` 在上述代码中，我们将元素的`white-space`属性设置为`nowrap`，以防止文本换行。然后，使用`overflow: hidden`隐藏溢出的文本部分。接下来，使用`text-overflow: ellipsis`显示省略号。为了支持多行溢出效果，我们使用了`display: -webkit-box`和`-webkit-line-clamp`属性。`-webkit-line-clamp`指定了显示的行数，这里设置为2表示最多显示两行。最后，通过`-webkit-box-orient`属性垂直排列文本。 您可以将上述CSS类应用于需要实现多行溢出省略号效果的元素上，例如： ```html <p class="overflow-ellipsis">这是一段需要多行溢出省略号的文本。</p> ``` 这样，文本就会在超过两行时显示省略号了。请注意，这种方式仅在支持`-webkit-line-clamp`属性的浏览器中生效，如Webkit内核的浏览器（Chrome、Safari等）。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值