react实现多行文本超出加省略号
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实现多行文本超出加省略号的更多相关文章
- html文本超出加省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...
- css控制单行或者多行文本超出显示省略号
1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...
- Android判断TextView是否超出加省略号
我们都知道通过指定android:ellipsize="end" android:singleLine="true" 可以让TextView自动截断超出部分并且 ...
- 微信小程序文字超出加省略号
我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678 view{ overflow:hidden; //超出一行 ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
随机推荐
- JavaScript_几种创建对象(2017-07-04)
理解对象 1.创建Object实例 var clock = new Object(); clock.hour = 12; clock.minute = 10; clock.showHour = fun ...
- __Linux__操作系统发展史
常见操作系统win7.Mac.Android.iOS . 操作系统的发展史 1.Unix 1965年之前的时候,电脑并不像现在一样普遍,它可不是一般人能碰的起的,除非是军事或者学院的研究机构,而且当时 ...
- STM32 逐次逼近寄存器型(SAR)模拟数字转换器(ADC)
是采样速率低于5Msps (每秒百万次采样)的中等至高分辨率应用的常见结构. SAR ADC的分辨率一般为8位至16位,具有低功耗.小尺寸等特点. 这些特点使该类型ADC具有很宽的应用范围,例如便携/ ...
- Drawing line on a click on ZedGraph Pane
https://stackoverflow.com/questions/12422398/drawing-line-on-a-click-on-zedgraph-pane public Form1() ...
- 使用Linux(CentOS)搭建SVN服务器全攻略
虽然在windows上搭建SVN很简单,但是效能却不高,这当然是和linux相比了.然而在linux上搭建SVN却非常繁琐,所以今天这篇文章就来一步一步教您如何在Centos上搭建SVN 安装 #yu ...
- lua去掉字符串中的UTF-8的BOM三个字节
废话不多说,还是先说点吧,项目中lua读取的text文件如果有BOM,客户端解析就会报错,所以我看了看,任务编辑器swGameTaskEditor 在写入文件的时候,也不知道为什么有的文件就是UTF- ...
- IIS6 2.0 4.0 冲突解决 'c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\xxx' -- 'Access is denied. '
今天在阿里云虚拟机上部署新站点后出现下面的错误: Compiler Error Message: CS0016: Could not write to output file 'c:\Windows\ ...
- hadoop权威指南学习(一) - 天气预报MapReduce程序的开发和部署
看过Tom White写的Hadoop权威指南(大象书)的朋友一定得从第一个天气预报的Map Reduce程序所吸引, 殊不知,Tom White大牛虽然在书中写了程序和讲解了原理,但是他以为你们都会 ...
- angularjs 1.x lazyloading
https://oclazyload.readme.io/docs 安装好后直接使用 var myApp = angular.module("MyApp", ["oc.l ...
- leetcode笔记:Validate Binary Search Tree
一. 题目描写叙述 Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is ...