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. 安卓开发-Activity中finish() onDestroy() 和System.exit()的区别(转)

    Activity.finish()Call this when your activity is done and should be closed. 在你的activity动作完成的时候,或者Act ...

  2. CocosCreator编辑器脚本生命周期函数

    Cocos Creator 为组件脚本提供了生命周期的回调函数.用户只要定义特定的回调函数,Creator 就会在特定的时期自动执行相关脚本,用户不需要手工调用它们. 目前提供给用户的生命周期回调函数 ...

  3. git代码合并:Merge、Rebase的选择

    代码合并:Merge.Rebase的选择 Zhongyi Tong edited this page on Dec 7, 2015 · 3 revisions Pages 19 Home 2.1 快速 ...

  4. Window Server 2008 R2 TFS2010 安装前的准备

    前言 http://www.cnblogs.com/aehyok/p/3979707.html 这里简单介绍了安装windows Server 2008 R2系统,接下来就开始介绍安装Team Fou ...

  5. C++中extern “C”含义及extern、static关键字浅析

    https://blog.csdn.net/bzhxuexi/article/details/31782445 1.引言 C++语言的创建初衷是“a better C”,但是这并不意味着C++中类似C ...

  6. Art: Neural Style Transfer

    Andrew Ng deeplearning courese-4:Convolutional Neural Network Convolutional Neural Networks: Step by ...

  7. cmake mac 安装

    Cmake 在mac上的安装 cmake 官网:https://cmake.org/ 以源码方式安装 1. 下载源码:https://cmake.org/files/v3.9/cmake-3.9.0- ...

  8. 使用Genymotion模拟器调试出现INSTALL_FAILED_CPU_ABI_INCOMPATIBLE错误的解决办法

    如果遇到下面这种错误: 点击下载Genymotion-ARM-Translation.zip 百度云连接:http://pan.baidu.com/s/1o6ifjMM 将你的虚拟器启动起来,将下载好 ...

  9. 可显示行号的log工具

    import android.util.Log; /** * (ExtendedLog=>ELog)可以记录行号,类名,方法名的Log工具 * * @author Fantouch */ pub ...

  10. 12C -- ORA-65005: missing or invalid file name pattern for file

    克隆pdb创建新的pdb的时候遇到了以下的错误,具体过程如下文.数据库版本:12.2.0.1 查看已有pdb的tempfile文件 SQL> select name from v$tempfil ...