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

  1. html文本超出加省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  2. css实现单行、多行文本超出显示省略号

    前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...

  3. css控制单行或者多行文本超出显示省略号

    1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...

  4. Android判断TextView是否超出加省略号

    我们都知道通过指定android:ellipsize="end" android:singleLine="true" 可以让TextView自动截断超出部分并且 ...

  5. 微信小程序文字超出加省略号

    我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678 view{ overflow:hidden; //超出一行 ...

  6. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  7. 多行文本溢出显示省略号(…) text-overflow: ellipsis

    详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...

  8. CSS实现单行、多行文本溢出显示省略号(…)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  9. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

随机推荐

  1. (华中科大)江南雨烟 C++ STL 专栏

    本文转载来自,华中科技大学江南雨烟的C/C++专栏部分STL剖析文章,以作学习之用. [1]  [C++ STL学习之一]容器的共通能力和共通操作总结 [2]  [C++ STL学习之二]容器vect ...

  2. 最基本的区块链hello world(python3实现)

    源自 用不到 50 行的 Python 代码构建最小的区块链 (英文原文:Let’s Build the Tiniest Blockchain ) ,但是文中的代码是基于python2的,python ...

  3. PHP 计算两个时间戳之间相差的时间

    //功能:计算两个时间戳之间相差的日时分秒 //$begin_time 开始时间戳 //$end_time 结束时间戳 function timediff($begin_time,$end_time) ...

  4. Synchronized、lock、volatile、ThreadLocal、原子性总结、Condition

    http://blog.csdn.net/sinat_29621543/article/details/78065062

  5. (总结)Ubuntu apt-get apt-cache命令 使用

    http://rsljdkt.iteye.com/blog/1142463 apt-cache search wubipinyin apt-get命令本身并不具有管理软件包功能,只是提供了一个软件包管 ...

  6. mysql5.7报err 1055错误 sql_mode=only_full_group_by

    vim /etc/my.cnf 末尾增加 sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_B ...

  7. Ubuntu16.04下安装和配置Redis

    一.前提条件 需要连接互联网,然后执行sudo apt-get update更新软件包 二.执行安装命令 sudo  apt-get install redis-server 执行后如下图所示,我们输 ...

  8. ESXI 迁移至KVM (V2V迁移)

    1.1.1 ESXI将虚拟机导出 导出ova模板 将导出的ova模板导入到KVM环境中. 1.1.2 配置KVM环境 详情参考:http://www.cnblogs.com/clsn/p/836625 ...

  9. Java 8 学习资料汇总【转载】

    原文地址 2014年3月18日,Java SE 8 发布,而 Java 9 预期2016年发布: 2011年7月7日,Java 7 发布,是2009年4月20日被Oracle 以74亿美元收购首次推出 ...

  10. WPF 使用HttpListener搭建本地web服务器

    准备工作 using Micro.Listener 类(Micro.Listener.dll)下载 调用示例:一.启动服务:new Micro.Listener.ListenerSync(8080). ...