在普通的前端项目中,在不考虑兼容问题的时候,可以用以下代码实现:

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

但是在React项目之中不生效是因为在react编译后没有-webkit-box-orient: vertical;

解决方法是添加行内样式:

<p style={{"WebkitBoxOrient": "vertical"}}>
React多行文本省略
</p>

React中多行文本省略不生效原因的更多相关文章

  1. [转]关于tomcat 中的 tomcat-users.xml 配置不生效原因

    安装完tomcat,或者解压完tomcat后,在tomcat的目录下有个conf文件夹,在这个文件夹下面有一个tomcat- users.xml的文件,这个文件里面的配置信息是当我们进入http:// ...

  2. React中setState的怪异行为 ——setState没有即时生效

    setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...

  3. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

  4. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

  5. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  6. react 中发布订阅模式使用

    react 中发布订阅模式使用 场景 怎么能将设计模式应用到我们的 React 项目中?以前一直在思考这个问题. 场景一 模块 A 模块 B 需要用到同一个数据 data,A 和 B 都会修改这份数据 ...

  7. react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题

    一.react中图片引入方式 以前我们用img引入图片只需要如下即可,在react中这样写会报错: <img src="../assets/zzsc1.png" /> ...

  8. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  9. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

随机推荐

  1. Core篇——初探IdentityServer4(客户端模式,密码模式)

    Core篇——初探IdentityServer4(客户端模式,密码模式) 目录 1.Oatuth2协议的客户端模式介绍2.IdentityServer4客户端模式实现3.Oatuth2协议的密码模式介 ...

  2. class A<T> where T:new()相关知识点

    来源:http://www.cnblogs.com/FredWang/p/4284251.html class A<T> where T:new()  ===>>>   ...

  3. root密码忘记怎么办?

    忘记root密码:按 e进入内核在按e,后面加1 .按b启动 进入命令行输入passwd,设置新的密码后exit退出即可

  4. 安装typescript开发环境

    参考文档: http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 有两个方式 : 1.安装vs 2017,安 ...

  5. ObjectT5:在线随机森林-Multi-Forest-A chameleon in track in

    原文::Multi-Forest:A chameleon in tracking,CVPR2014  下的蛋...原文 使用随机森林的优势,在于可以使用GPU把每棵树分到一个流处理器里运行,容易并行化 ...

  6. Algorithms算法题<1.1>

    1.1.27 二项分布.估计用一下代码计算binomial(100,50,0.25)将会产生的递归调用次数: public static double binomial(int N,int k,dou ...

  7. 插入排序InsertSort

    插入排序:从第二个数开始  一直和前面的数组比较 获得排序定位 ​ 代码 /** *插入排序 */ public class InsertSort { public static void inser ...

  8. PHP如何判断一个数组是一维的还是二维的

    1.首先我们有一个PHP内置函数 count(); count(array,mode); array是数组,mode默认为0,1是递归的计数 <?php if(count($arr) == co ...

  9. 【BZOJ2806】【CTSC2012】Cheat - 广义后缀自动机+单调队列优化DP

    题意: Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数 接下来M行的01串,表示标准作文库 接下来N行的01串,表示N篇作文 Output N行 ...

  10. 报错The jarsigner could not be found. Make sure to run with the build with a JDK。的解决方法

    这种报错是因为eclipse启动时没有走你设置的jdk路径,eclipse走的路径/bin下没有jarsigner.exe.所以报错,解决办法: 指定eclipse启动jdk 按住alt键,用鼠标拖动 ...