react实现多行文本超出加省略号
React 实现 文本 多行 超出 省略号
2023-09-14 09:07:44 时间
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>
然后即可实现。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- React saga_react获取子组件ref
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- 腾讯前端二面react面试题合集
- 【译】JavaScript实现文字剪贴板&React版本
- 【React Hooks 专题】useEffect 使用指南
- axios实现跨域三种方法_react antdesign
- 逐步拆解React组件—Swipe轮播图
- 说说React-Router底层实现?-面试进阶
- react源码分析:实现react时间分片
- 从实现一个React到深度理解React框架核心原理
- mini react-window(二) 实现可知变化高度虚拟列表
- React
- 几个你必须知道的React错误实践_2023-02-27
- react+antd Tree树控件(Demo可以直接运行)实现(递归生成数据)同时支持左边图标自定义也可以加自己的Logo
- 带你实现react源码的核心功能_2023-02-28
- 从react源码看hooks的原理_2023-03-01
- 盘点React开发中不可或缺的工具
- 2021年vue和react如何选择
- 从React源码开始分析useEffect
- 一起实现React-Hooks核心原理
- react:组件的生命周期、父子组件的生命周期
- React源码学习入门(十二)DOM组件更新流程与Diff算法
- 在React中使用 react-router-dom 编程式路由导航【含V5.x、V6.x】
- react源码中的生命周期以及事件系统
- react源码分析:深度理解React.Context
- 带你实现react源码的核心功能_2023-02-07
- 杨校老师项目之基于SpringBoot+React框架开发的医院挂号管理系统