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. TVTK库的安装

    1.在网址为:http://www.lfd.uci.edu/~gohlke/pythonlibs/ 里下载以下内容: VTK-7.1.1-cp36-cp36m-win_amd64.whlnumpy-1 ...

  2. memcached协议解析

    本文转载自:http://www.ccvita.com/306.html 协议memcached 的客户端使用TCP链接与服务器通讯.(UDP接口也同样有效,参考后文的 “UDP协议” )一个运行中的 ...

  3. 本地Sql Server数据库传到服务器数据库

    将网站项目上传到服务器时,会遇到本地数据库该如何上传的问题.下面在西部数码购买的虚拟主机的基础上,解决数据库上传问题.   1.在西部数码购买虚拟主机后,会赠送了一个数据库,该数据库就可以作为网站项目 ...

  4. SSH三大框架的原理和核心(转)

    一.Struts2的工作流程:1.用户在客户端发起请求,客户端会初始化一个servlet容器请求:2.servlet容器把请求会传递给context容器,context容器找到目标web工程.3.进行 ...

  5. 关于Linux的Putty连接访问

    1.打开putty 2.点击Connection->SSH->Auth->Brower 3.输入root@域名,点击open 4.进入成功

  6. asp.net mvc流程图4.6以前

  7. 线程安全的CopyOnWriteArrayList介绍

    证明CopyOnWriteArrayList是线程安全的 先写一段代码证明CopyOnWriteArrayList确实是线程安全的. ReadThread.java import java.util. ...

  8. C# Callback思维

    方式一.用委托作为形参,把结果传回实参方式二.通过接口实现方式三.通过事件关联,适用桌面应用程序方式四.子窗体调用父窗体的函数(委托) 方式一.用委托作为形参,把结果传回实参 public parti ...

  9. MVC项目实践,在三层架构下实现SportsStore-11,使用Knockout实现增删改查

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  10. 【Visual Studio】Visual Studio对CLR异常的特殊支持

    Visual Studio 对异常进行了特殊的支持,它能够在进行了特殊设置后,使代码中的try catch块失效.也就是说,一个异常在正常情况下应该能够被某个特殊的try catch块捕获,但是Vis ...