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

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. oracle scott趣事

    Oracle里面是scott是个什么用户呢? 这个就要追朔到Oracle的创业阶段了, 1977年6月,埃里森,Bob Miner和Ed Oates在硅谷共同创办了一家名为软件开发实验室(Softwa ...

  2. 关于React-native的介绍以及环境搭建

    React-Native介绍(后面内容的RN就是指react-native) 由facebook公司推出的,基于react,能开发原生app 原理: 1. 利用react框架写好js代码 2. 利用p ...

  3. Android拍照，录制视频，相机简单功能实现

    1.效果图,功能没有录制出来. 基本实现了拍照,录制视频,前后摄像头切换的功能,可以转屏,聚焦. 代码在最下面,可以看代码,运行apk看实际效果. 2.权限不能忘 <uses-permissio ...

  4. 使用vs2017创建项目并添加到git中

    参考 https://blog.csdn.net/qq373591361/article/details/71194651 https://blog.csdn.net/boonya/article/d ...

  5. element-ui Cascader 级联选择器示例

    <html> <head>test</head> <style> @import url("http://unpkg.com/element- ...

  6. input[type=radio]选中的样式变化

    input[type=radio]:hover{ border: 2px solid #D0D0D0; } input[type=radio]:focus{ border: 2px solid #1B ...

  7. IdentityServer4-HybridAndClientCredentials

    一.服务器 Client设置: new Client { ClientId = "mvc1", ClientName = "后台管理MVC客户端", Clien ...

  8. Codeforces Round #471 (Div. 2)A. Feed the cat

    After waking up at hh:mm, Andrew realised that he had forgotten to feed his only cat for yet another ...

  9. vue router 配置默认页/404页面

    *号通配404默认页面

  10. MYSQL数据库常用的LINUX命令

    此为我工作中常用MYSQL数据库命令 LINUX系统中启动 / 重启MYSQL服务:service mysql start  /  service mysql restart(重启服务) LINUX系 ...