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>

然后即可实现。
react实现多行文本超出加省略号的更多相关文章
- html文本超出加省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...
- css控制单行或者多行文本超出显示省略号
1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...
- Android判断TextView是否超出加省略号
我们都知道通过指定android:ellipsize="end" android:singleLine="true" 可以让TextView自动截断超出部分并且 ...
- 微信小程序文字超出加省略号
我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678 view{ overflow:hidden; //超出一行 ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
随机推荐
- 在Notepad++中快捷选中多行
原文: 在Notepad++中快捷选中多行 Notepad++是Windows下一款很好用的文本编辑器. 如果需要在一个文档中选中指定的若干行,常见的办法是鼠标按住拖动.这样对于少数几行的选取还可以, ...
- 实例化和设置一个优秀的php对象
类是用于生成对象的代码模板,对象可以被说成是类的"实例" class ShopProduct{ public $title = 'default product'; // 属性也称 ...
- iOS埋点统计
链接: iOS无埋点数据SDK实践之路 iOS:无埋点数据SDK实践之路,看完能懂就厉害了 iOS埋点业务方案 ios 无码统计埋点 使用AOP实现iOS应用内的埋点计数 Aspects(AOP) A ...
- C++ operator重载运算符和隐式转换功能的实现
C++ operator重载运算符和隐式转换功能的实现: #include <iostream> using namespace std; class OperatorTest { pub ...
- 跟着ZooKeeper学Java——CountDownLatch和Join的使用
在阅读ZooKeeper的源码时,看到这么一个片段,在单机模式启动的时候,会调用下面的方法,根据zoo.cfg的配置启动单机版本的服务器: public void runFromConfig(Serv ...
- .net 企业管理系统快速搭建框架
简言 本人在博客园注册也2年多了,一直没有写自己的博客,因为才疏学浅一直跟着园子里的大哥们学习这.net技术.一年之前跳槽到现在的公司工作,由于公司没有自己一套的开发框架,每次都要重新 ...
- oracle io 等待图解
- Android.mk简介<转>
文章参照:http://blog.sina.com.cn/s/blog_67d8d7060100q8un.html Android.mk文件是GNU Makefile的一小部分,它用来对Android ...
- mysql如何处理亿级数据,第一个阶段——优化SQL语句
1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...
- IPV4地址分类
IPV4地址的分类 私网地址: 10.0.0.0/8 //A类地址 172.16.0.0/16-172.31.0.0/16 ...