前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(一)文本溢出处理方式

(一)文本溢出处理方式

作者头像
老怪兽
发布2023-02-22 19:39:20
7590
发布2023-02-22 19:39:20
举报

div盒子显示具体行数多余的通过...显示

说明

在我刚接触到前端的时候像一下这种超出省略的效果我都是手敲的,要不是就直接超出隐藏,但是这样很不美观,后面发现了 css 就可以完成这个效果,下面奉上代码

一、显示一行

代码语言:javascript
复制
// 只显示一行,多余的通过...
// 只显示一行的设置方法很简单
.item{	
    overflow: hidden;			// 溢出隐藏
    white-space: nowrap;		// 强制一行显示文本
    text-overflow: ellipsis;	// 溢出部分使用ellipsis 也就是省略号显示
}

最终效果图:

effect
effect

二、显示多行

代码语言:javascript
复制
// 多行显示,多余的通过... 
// 多行的设置比单行的要多几个内容
.item{
	overflow: hidden;				// 老样子溢出隐藏
	text-overflow: ellipsis;		// 溢出的部分还是使用ellospis 显示
	display: -webkit-box;			// 把盒子设置为弹性盒子
	-webkit-box-orient: vertical;   // 垂直上到下的子元素
	-wekit-line-clamp: 2;			// 这行就是关键了具体要显示多少行就在这里设置了
}

最终效果图:

effect
effect

三、总结

各位观众老爷以上呢是我的一个自我总结,全部纯手敲,要错误的地方还望手下留情不要喷我,还有就是以上设置方法有浏览器的兼容问题,但是都这个年代了老浏览器都淘汰了,懂得都懂啊.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年11月2日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • div盒子显示具体行数多余的通过...显示
    • 一、显示一行
      • 二、显示多行
        • 三、总结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档