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. flask之wtform与flask-session组件

    1.wtform from flask import Flask, render_template, request, redirect from wtforms import Form from w ...

  2. memcached 一致性哈希算法

    本文转载自:http://blog.csdn.net/kongqz/article/details/6695417 一.概述 1.我们的memcache客户端使用了一致性hash算法ketama进行数 ...

  3. Saltstack 安装 命令

    主机规划 10.0.0.21 master 10.0.0.22 minion 10.0.0.23 minion 基础环境 [root@10.0.0.21 ~]# cat /etc/redhat-rel ...

  4. iOS 跳转到系统指定设置界面

    在需要调转的按钮动作中添加如下的代码,就会跳转到设置中自己的app的设置界面,这里会有通知和位置权限的设置 NSURL * url = [NSURLURLWithString:UIApplicatio ...

  5. 移动电源、3G路由拆机

    这款电源4400mAh,淘宝也就八十元左右,可以作为无线路由使用,可以插3G网卡,总的来说还算不错,关键是外观精美,网上一堆和华美A100那样的,可惜实在太丑,这款外观虽然漂亮,但是和一百多的相比不支 ...

  6. Spring Boot异常处理

    一.默认映射 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局 ...

  7. Spark2.2+ES6.4.2(三十一):Spark下生成测试数据,并在Spark环境下使用BulkProcessor将测试数据入库到ES

    Spark下生成2000w测试数据(每条记录150列) 使用spark生成大量数据过程中遇到问题,如果sc.parallelize(fukeData, 64);的记录数特别大比如500w,1000w时 ...

  8. CSS 布局整理

    1.css垂直水平居中 效果: HTML代码: <div id="container"> <div id="center-div">&l ...

  9. Python中文语料批量预处理手记

    手记实用系列文章: 1 结巴分词和自然语言处理HanLP处理手记 2 Python中文语料批量预处理手记 3 自然语言处理手记 4 Python中调用自然语言处理工具HanLP手记 5 Python中 ...

  10. c# 序列化BinaryFormatter、SoapFormatter和XmlSerializer的区别

    在C#中常见的序列化的方法主要也有三个:BinaryFormatter.SoapFormatter.XML序列化 1.BinaryFormatter 序列化 [Serializable] //如果要想 ...