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>

然后即可实现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能

    myPage分页控件发出来之后,虽然开源了,但是没有给一个简单一点的 demo,真是漏掉了一个很重要的部分。     先说明一下使用myPage分页...

24010
来自专栏移动开发面面观

React Native的state

953
来自专栏進无尽的文章

扒虫篇-Bug日志Ⅴ

解决方法:首先这个警告不会造成上传失败,也不会造成审核被拒。其次可以通过移除代码中警告的那些代码,并移除多余不使用的系统类库(framework),使警告消失。

1381
来自专栏禅林阆苑

Vue2.5源码阅读笔记01—代码结构与初始化

Vue作为当下最流行的渐进式的js框架,其渐进式的思想、虚拟DOM的运用、组件化的开发模式、响应式数据侦听原理值得开发者进行探索学习,其中运用的代码组织的技巧,...

72959
来自专栏GIS讲堂

PhotoShop脚本指南

Photoshop支持三种脚本语言:AppleScript,VBScript,JavaScript。其中AppleScript为苹果系统,VBScript为Wi...

4582
来自专栏前端新视界

Vue.js 系列教程 3:Vue-cli,生命周期钩子

原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教...

3385
来自专栏TungHsu

怎么快速将PPT转为Word文档?

想必大家都有打印PPT的经历,一般大家的方法是缩小PPT页然后打印,今天教大家一个新方法,将快速将PPT转为Word文档。

843
来自专栏狂码一生

ThinkPHP文件上传

    在自己写的类中加入一个方法,下面我把我写的一个方法直接拿上来:     /*      * 文件上上传      * */     public fu...

68310
来自专栏编程坑太多

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

1032
来自专栏salesforce零基础学习

salesforce lightning零基础学习(四) 事件(component events)简单介绍

2033

扫码关注云+社区

领取腾讯云代金券