CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

所属分类 WEB

相关标签 CSS字符串失效

文本超出省略目标效果

我是一个超级长超级长超级长超级长超级长的标题

我是一个超级长超级长超级长超级...

当文本超过宽度是进行省略并追加省略号

单行省略样式

单行省略一般用于标题

h1{
    /*超出隐藏*/
    overflow: hidden;
    /*文本超出显示为省略号*/
    text-overflow:ellipsis;
    /*文本不换行*/
    white-space: nowrap; 
}

多行超出省略号

多行超出,可以动态设计几行进行超出省略。

一般用于列表也显示描述的时候。

p{
    /*超出隐藏*/
    overflow: hidden;
    /*文本超出显示为省略号*/
    text-overflow: ellipsis; 
    /*自适应盒子模型*/
    display: -webkit-box;
    /*行数2*/
    -webkit-line-clamp: 2;
    /*顶部向底部垂直布置子元素*/
    -webkit-box-orient: vertical;
    /*为了保证准确建议增加以下配置*/
    /*行高*/
    line-height: 25px;
    /*总高*/
    height: 50px;
}

-webkit-box-orient: vertical属性在某些时候可能不生效

比如:VUE打包后-webkit-box-orient: vertical; 样式消失,原因是Vue打包的时候,过滤了部分css。

p{
    /*超出隐藏*/
    overflow: hidden;
    /*文本超出显示为省略号*/
    text-overflow: ellipsis; 
    /*自适应盒子模型*/
    display: -webkit-box;
    /*行数2*/
    -webkit-line-clamp: 2;
    /*顶部向底部垂直布置子元素*/
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    /*为了保证准确建议增加以下配置*/
    line-height: 25px;
    height: 50px;
}

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核