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实现多行文本超出加省略号

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370767.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Google Guava MultiMaps

番石榴 这是系列文章中的第一篇&#xff0c;我将尝试解释和探索Google很棒的Guava java库 。 我在搜索Apache Commons Collections的通用版本时遇到了番石榴&#xff08;Guava&#xff09;–我需要一个Bimap并且厌倦了必须使用强制类型转换来填充我的代码–但是我发现要好得多…

qq群 html,我的群组-普通群组.html

&#xfeff;我的群组&#xff0d;普通群组$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resou…

查看PLC IP 端口_西门子828D数控系统X130接口通讯怪异现象(X130手动设置的 IP)...

西门子828D数控系统&#xff0c;调试PLC过程中遇到网络通信怪异问题(不能直连非要加个路由器)&#xff0c;笔记本电脑的以太网网络直接连接显示网络电缆被拔出&#xff0c;如下图所示&#xff1a;奇怪&#xff0c;怎么出现这种情况了呢&#xff0c;因为我用这台电脑调试过别的P…

基于嵌入式系统的gnash最小库依赖关系

已经对gnash的依赖库作了详细的分析&#xff0c;下边是必须依赖的库&#xff1a;GIF Required libungif-devlibxml2 Required libxml2-devPNG Requir…

git 创建webpack项目_一次create-react-app创建项目升级webpack的流水账

不再赘述为什么要升级webpack4&#xff0c;有兴趣的小伙伴可以看一下 知乎&#xff1a;如何评价webpack4下面撸起袖子开干&#xff1a;克隆项目&#xff0c;新建分支git checkout -b feature_webpack_upgrade# 相当于以下两句的简写git branch feature_webpack_upgradegit chec…

bzoj1263

贪心 n%31 分出一个4&#xff0c;其余用3&#xff0c;n%32&#xff0c;分出一个2&#xff0c;其余用3&#xff0c;然后高精度就行了 #include<bits/stdc.h> using namespace std; const int N 5005; struct BigInt {int len;int a[N];BigInt() { memset(a, 0, sizeof(a)…

c语言volatile_[技术]为什么单片机C语言编程时某一变量有时乱码

最近一个项目里面&#xff0c;在KEIL中用C语言在单片机里面定义了一个状态机全局变量&#xff0c;这个变量随时会改变&#xff0c;用于切换触摸屏的界面&#xff0c;可是程序运行中出现了一个问题&#xff0c;这个状态机号总是出现了被莫名奇妙改变的问题&#xff0c;导致触屏不…

沙箱Java代码

在上一篇文章中&#xff0c;我们研究了如何保护移动Java代码 。 这样做的一种选择是在笼子或沙箱中运行代码。 这篇文章探讨了如何为Java应用程序设置这样的沙箱。 安全经理 Java中支持沙箱的安全性设施是java.lang.SecurityManager 。 默认情况下&#xff0c;Java在没有Se…

微型计算机2017年9月上,2017年9月计算机一级考试WPS Office冲刺题

2017年9月计算机一级考试WPS Office冲刺题2017年下半年计算机一级考试将在9月份进行&#xff0c;为了方便考生备考计算机一级考试。下面是小编为大家带来的计算机一级考试WPS Office冲刺题&#xff0c;欢迎阅读。冲刺题一&#xff1a;1、PowerPoint 演示文稿和模板的扩展名是【…

七. 多线程编程5.创建多线程

到目前为止&#xff0c;我们仅用到两个线程&#xff1a;主线程和一个子线程。然而&#xff0c;你的程序可以创建所需的更多线程。例如&#xff0c;下面的程序创建了三个子线程&#xff1a;// Create multiple threads.class NewThread implements Runnable { String name; /…

11尺寸长宽 iphone_弱电工程LED显示屏尺寸规格及计算方法

前言&#xff1a;led屏幕在生活中&#xff0c;随处可见&#xff0c;显示屏、广播屏等等&#xff0c;但是led尺寸怎么计算的&#xff0c;你知道吗&#xff1f;今天我们一起了解一下led屏幕尺寸的计算方法。正文&#xff1a;一、点间距的计算1、各单元板常见型号及尺寸LED屏普遍是…

marquee标签的使用

<!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>演示marquee</title><style type"text/css">*{padding: 0px;margin: 0px;}marquee{border: 1px solid purple;}img{width: 360px;height: auto;}&…

32位数据源中没有mysql_[SpringBoot实战]快速配置多数据源(整合MyBatis)

前言由于业务需求&#xff0c;需要同时在SpringBoot中配置两套数据源&#xff08;连接两个数据库&#xff09;&#xff0c;要求能做到service层在调用各数据库表的mapper时能够自动切换数据源&#xff0c;也就是mapper自动访问正确的数据库。本文内容&#xff1a;在SpringbootM…

考研计算机冷门学校,考研5个冷门的985院校 别随大流,这些几所也是很不错的...

导语&#xff1a;想必大家考研的目的有很多&#xff0c;最主要的就是想去更好的学校提升自己&#xff0c;大部分会肯定是会更倾向于985这类的院校&#xff0c;每年其实除了那些被“挤破头”的985院校&#xff0c;其实还有不少“低调”的985院校是非常值得报考的&#xff0c;下面…

名为 cursor_jinserted 的游标不存在_质量工程师必须了解的测量常识,你不知道怎么行...

01测量器具的分类测量器具是一种具有固定形态、用以复现或提供一个或多个已知量值的器具。按用途的不同量具可分为以下几类&#xff1a;1. 单值量具只能体现一个单一量值的量具。可用来校对和调整其它测量器具或作为标准量与被测量直接进行比较&#xff0c;如量块、角度量块等。…

window.onload事件

!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>window.onload</title><!--window.onload注意点&#xff1a;01.在整个页面中只能存在一次&#xff0c;否则后面会覆盖前面02.页面中所有的内容加载…

bzoj4869

http://www.lydsy.com/JudgeOnline/problem.php?id4869 终于A了。。。参考了下dalao的代码。。。 拓展欧几里得定理&#xff0c;改了几次就不变了&#xff0c;但是用的时候要在快速幂里判是不是要用。 #include<bits/stdc.h> using namespace std; typedef long long ll…

一张图一个表——CSS选择器总结

CSS选择器总结&#xff1a; (这些表是一张图片^_^) 看底部 完整思维导图图片和表格的下载地址&#xff1a;https://download.csdn.net/download/denlnyyr/10597820 &#xff08;我不想选择要积分币下载的&#xff0c;但那里最低必须选择1个积分……&#xff09; 参考文献&…

JavaOne 2012覆盖率

年度Java盛会JavaOne会议于9月30日至10月4日在旧金山举行。 进行了许多有趣的演示&#xff0c;再次证明了健康的Java生态系统。 Java Code Geeks未能参加会议&#xff0c;但是我们的JCG合作伙伴Dustin Marx出席了会议&#xff0c;并且慷慨地提供了有关该事件的完整报道&#x…

native层 安卓_安卓逆向——拼xx协议java层分析

制丨阿星整理丨阿星老铁们大家好&#xff0c;今天小编给大家带来很实用的技巧叫拼xx协议java层分析&#xff0c;有啥不足的地方望大家指点指点&#xff01;首先抓包 反编译这个时间段我们方法剖析一下找到onclick 看他的走向找到方法的地方都是在进行写入 所以我们直接分析结果…