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. VS2012 VS2015打开项目加载失败

    VS2012 VS2015打开项目加载失败 改成这个$(MSBuildToolsVersion)试试

  2. C++ 代码格式化工具Astyle

    1.下载Asyle程序. win版本:https://sourceforge.net/projects/astyle/ 2.将bin/AStyle.exe拷到源码目录中,在命令行终端执行. AStyl ...

  3. ORB-SLAM2(一)----使用Eclipse进行开发

    1.导入项目 准备工作 1, first we should make sure the compile with build.sh under ORB_SLAM2-master is OK. 2, ...

  4. Python进制转换(二进制/八进制/十进制/十六进制)

    Python 进制转换 二进制 八进制 十进制 十六进制 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/python3-scale.html 全局定义 ba ...

  5. 你不知道的js

    1.<a>标签 (1)href属性包含超链接或超链接指向的URL或URL片段,URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID).URL ...

  6. facebook's HipHop for PHP: Move Fast

    One of the key values at Facebook is to move fast. For the past six years, we have been able to acco ...

  7. SpringMVC+Thymeleaf +HTML的简单框架

    一.问题 项目中需要公众号开发,移动端使用的是H5,但是如果不用前端框架的话,只能考虑JS前端用ajax解析JSON字符串了.今天我们就简单的说下前端框架Thymeleaf如何解决这个问题的: 二.开 ...

  8. ROS actionlib学习(二)

    在ROS actionlib学习(一)中的例子展示了actionlib最基本的用法,下面我们看一个稍微实际一点的例子,用actionlib计算斐波那契数列,并发布反馈(feedback)和结果(res ...

  9. 2.翻译系列:为EF Code-First设置开发环境(EF 6 Code-First系列)

    原文链接:http://www.entityframeworktutorial.net/code-first/setup-entity-framework-code-first-environment ...

  10. Android UI系列-----LinearLayout的综合使用

    这里将会对LinearLayout的布局方式进行一个综合的使用,通过一个例子来看看LinearLayout的嵌套布局方式,在这之前首先介绍三个属性: 1.①android:layout_weigth: ...