CSS实现多行文字截断

最新推荐文章于 2023-12-22 11:36:26 发布
最新推荐文章于 2023-12-22 11:36:26 发布
阅读量447 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongzhonghua/article/details/83896451
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多行截断</title>
		<style>
			.line1{
			    white-space:nowrap;/*这行是干嘛的*/
			    overflow:hidden;
			    text-overflow:ellipsis; 
			}
			.line2{
				display: -webkit-box;/*对象作为弹性盒子使用*/
			    -webkit-line-clamp: 2;/*不规则属性，只有webkit内核的浏览器才支持，移动设备大部分支持*/
			    -webkit-box-orient: vertical;/*设置或检索伸缩盒子对象的子元素的排列方式*/
			     overflow : hidden;
			    text-overflow: ellipsis;
			}
			
			.longtext{
				width: 200px;
				margin: 100px auto;
				background: hotpink;
			}
			.wys{
				position: relative;
				line-height: 18px;
				height: 36px;
				overflow: hidden;
				word-break:break-all;
			}
			.wys:after{/*该方法...会一直有,不适用*/ 
				content: '...';
				position: absolute;
				right: 0;
				bottom: 0;
				padding: 0 20px 1px 45px;
				
				background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255
最低0.47元/天 解锁文章
薛定谔的喵喵喵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯 CSS 实现多行文字截断功能
09-27
【纯 CSS 实现多行文字截断功能】 在前端开发中，尤其是在响应式设计中，有时我们需要对标题或内容进行多行文字截断，以适应不同的屏幕尺寸。本文将详细介绍如何仅使用 CSS 来实现这一功能，同时兼顾兼容性和响应式...
纯css实现多方文本的截断（展开查看全部内容，收起查看指定行并展示...的效果）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
03-18 1111
纯css实现多方文本的截断（展开查看全部内容，收起查看指定行并展示...的效果）
div固定大小文字溢出自动缩小_CSS 实现单行、多行文字截断，实现以...结尾的效果...
weixin_40002611的博客
11-29 4078
在项目需求开发时，由于文本内容长度的不确定性，经常会碰到文本内容超出的问题，通常这种情况，UI/UE都会要求我们将超出部分用省略号(...)来显示，这种做法基本上已经是一个业界共识了。然而，这么一个理所当然的效果，在前端却一直是一个难题。如下图：看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：兼容性...
CSS自动换行、强制不换行、强制断行、超出显示省略号
suwu150
05-31 9万+
CSS样式设置自动换行、强制不换行、强制断行、超出显示省略号 P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。...
【CSS】word-wrap换行 和 word-break断句
joanmelon的博客
10-26 815
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
css实现多行文字截断效果
qq_26780317的博客
11-02 3412
背景：在做响应式系统设计的时候，经常遇到需要对标题进行文字截取的效果，如下图所示： 一、先从单行文本截断入手       一般，实现单行文本截断比较容易，使用文本溢出text-overflow:ellipsis;就可以实现单行文本截断了，示例如下： div { white-space: nowrap; overflow: hidden; text-overflo...
纯CSS实现多行文字截断的示例代码
09-22
【纯CSS实现多行文字截断的示例代码】是一个关于如何使用CSS技术在网页设计中实现多行文字内容超出指定区域时进行截断并显示省略号的教程。在响应式设计中，这种功能非常常见，特别是对于标题或者摘要等需要适应不同...
CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号
01-08
在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的样式表文件，它使用了`-webkit-line-clamp`属性来指定省略的行数，以及一个“1.html.txt”的HTML文件，用于展示这个效果。...
CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
偏执的小男孩儿
12-07 1878
CSS内容超出...及flex两端对齐
css文字截断
dbj1245的专栏
09-11 297
通过css将文字进行截断，截断部分使用省略号代替 .impleName{ max-width: 100%; /*最大宽度为当前元素的100%*/ display: inline-block; white-space: nowrap;/*保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格*/ overflow: ...
进阶——CSS中多行文本时的行数控制显示
番薯大佬的专栏
04-18 4871
WeChat小程序交流（QQ群：769977169）有时候要进行多行文本内容只显示一行，或两行，或三行，这时候需要在css中进行相关属性的设置，代码如下：overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; // 显示2行 -webkit-box-orient: vertical; word-break: break-all;......
CSS中 设置( 单行、多行 )超出显示省略号
热门推荐
明天也要努力的博客
12-05 13万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
Css实现单行文本、多行文本、截断
曲小强
11-06 9839
一、单行文本截断 text-overflow 文本溢出经常用到的应该就是 text-overflow:ellipsis 了，只需轻松几行代码就可以实现单行文本截断。 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 二、-webkit-line-clamp 实现 div { /......
CSS中的单行、多行文本溢出总结
前端学习博客
01-15 8781
文章目录一.用到的相关属性1.white-space2.word-break3.text-overflow:4.`overflow`二.单行文本溢出三.多行文本溢出 一.用到的相关属性 1.white-space 这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。 ①white-space: nowrap: 不仅空格被合并，换行符无效，连原本的自动换行也没有了！只有<br
css应用之如何实现多行省略
xinyuerr的博客
12-03 1426
其实没有说哪个方案更好，只有合不合适你的方案，叫你去削个水果皮，拿把水果刀就好了，没必要用个大刀。所以，三个方案，总有一款符合你的需求的。微点阅读。
css 多行多列排版
Komorebi的博客
05-30 315
弹性布局
css 多行文本显示...
weixin_44616890的博客
05-18 466
【代码】css 多行文本显示...
css 超过一行/多行显示省略号... - 附示例
最新发布
m0_48968874的博客
12-22 1723
效果。
如何用CSS实现多行省略
hdxx2022的博客
03-03 3366
思路： 用于挡住省略号的方块也是绝对定位，靠右定为， right:0，但是 bottom值就不要设置了，如果不设置的话，该方块会跟着文本内容的实际高度移动，而不是 max-height的高度。值得留意的是，上面代码里关于width的注释写着“因为下面设置了margin，所以这里的宽度值大小没有要求”，之前都要求小于等于 :before宽度，但是现在由于采用margin-left负值抵消了本身的宽度，所以这个要求转化对 padding-right了，这时是等于。所以，三个方案，总有一款符合你的需求的。
前端css实现多行文字的展开收起
05-05
实现多行文字的展开收起，可以通过CSS和JavaScript来完成。 首先，利用CSS的text-overflow属性来控制文本的显示方式，当文本超出指定的显示范围时，可以将多余的文本隐藏起来，并用省略号来代替。 其次，使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值