react实现多行文本超出加省略号
http://www.css88.com/archives/5206
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
根据该文章方法,放在react项目中发现并不能实现,仔细观察发现原来react解析出来的css样式中没有了 这个样式 :
-webkit-box-orient: vertical;
所以我们需要在需要超出加省略号的标签上加一个行内样式:
<p className="right-margin-12 color-8 author-intro" style={{"WebkitBoxOrient": "vertical"}}>{news.pubInfo.introduction}</p>
然后即可实现。
本文转载于:猿2048➥https://www.mk2048.com/blog/blog.php?id=hc2jkaa&title=react实现多行文本超出加省略号
react实现多行文本超出加省略号相关推荐
- css多行文本超出显示省略号无效解决方法
css多行文本超出显示省略号,以2行为例,网上很多解决方法,如下.之前一直采用的是这种方法,最近发现无效了.vant也是这种写法, .txt-ellipsis-2 {display:-webkit-b ...
- 单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- after不显示_web前端入门到实战:css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- 多行文本超出用省略号代替,单击展开全部
这里主要讲解一个常见的文字处理程序,在我们开发的过程中,经常会遇到一段很长的文字,但是我们在页面上展示的时候,却需要他展示成几行,比如5行. 这里分享一个自己写的小DEMO,大家可以参考一下: 先看一 ...
- CSS 控制单行或者多行文本超出显示省略号
1.单行文本 p {overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段 ...
- 微信小程序多行文本超出显示省略号
第一个是单行文本 width: 500rpx; display:-webkit-box; -webkit-line-clamp:1; overflow:hidden; text-overflow:el ...
- 多行文本超出部分省略号代替
贼久没来了 记一波笔记: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4 ...
- 文本超出显示省略号的方法
1.一行文本超出显示省略号的方法:text-overflow和white-space超出隐藏显示省略号 设计css样式时,遇到要使文本在一行内显示,超出则加省略号的问题解决办法: 只需要使用text- ...
- html 超出显示出来,html超出显示省略号
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法 文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: elli ...
最新文章
- 3dvary灯光材质为什么不亮_夜间跑高速开近光灯与为什么近光灯和刹车泡容易坏。...
- C++矩阵处理工具——Eigen
- 连接好友服务器失败 无法显示,不显示好友的网络状态
- dicom格式怎么转换_webm怎么转换mp4?视频格式转换你需要知道这个
- 又整理了一批可以拿去做副业的开源项目...
- linux删除文件密码不奏效,Linux运维知识之linux_无秘登录问题(不生效)
- Mesos和Marathon下容器无法正常部署可能的原因
- c语言程序设计的反思,C语言程序设计教学反思
- IPwe区块链智能池利用AI来处理专利分析
- 北斗卫星短信通信与定位详解
- Linux下安装lsof
- DS12C887实时时钟
- 电脑c语言找不到,电脑安装过的应用程序找不到了怎么办
- [2022]李宏毅深度学习与机器学习课程内容总结
- .net升级到4.0之后,出现;System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798...
- mysql横竖表查询
- 简单2步轻松查找、免费下载国内外数据集?在OpenDataLab 真的可以
- 前端工程化、模块化、组件化
- 出现请按 ENTER 或其它命令继续解决方法
- 为何图标都变成了白色的方块了?
热门文章
- python属性和方法的区别_Python中几种属性访问的区别
- 缩影和掠影_普查员的“酸苦甜” 社区人口普查工作掠影
- NOIP模拟测试18「引子·可爱宝贝精灵·相互再归的鹅妈妈」
- 关于前端设置cookie
- BZOJ1433 ZJOI2009 假期的宿舍 二分图匹配
- 转: 微博的多机房部署的实践(from infoq)
- 2015.7.11js-10(无缝滚动)
- (Joomla)字符串截取
- 网页弹出窗口代码【来源于网络】
- zbox mysql_20190213云服务器部署禅道