多余文字隐藏用省略号代替

一，多行文字隐藏用省略号代替
border:1px solid #ddd;
width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 将对象作为伸缩盒子模型显示 /
-webkit-box-orient: vertical; / 设置或检索伸缩盒对象的子元素的排列方式 /
-webkit-line-clamp: 3; / 显示的行数 /
overflow: hidden; / 隐藏超出的内容 */
二，单行文字隐藏用省略号代替
width: 50px;
height: 5px;
overflow: hidden;
white-space:nowrap;/不显示的地方用省略号…代替/
text-overflow:ellipsis;/ 支持 IE */
-webkit-line-clamp: 3;
三，但是在React项目之中不生效是因为在react编译后没有-webkit-box-orient: vertical;
解决方法是添加行内样式：

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

多余文字隐藏用省略号代替相关推荐

使用CSS将多余文字显示成省略号
单行文字 overflow: hidden;text-overflow:ellipsis;white-space: nowrap; 多行文字 word-break: break-all;text-ov ...
div多出文字隐藏并用省略号代替
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>ti ...
如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）...
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
css3文字一行或多行展示，多余文字省略号（学习）超出隐藏
css3文字一行展示,多余文字省略号重点: 一行展示: text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 多行展示: o ...
隐藏多余的字用 “省略号” 代替
在前端经常会遇到类似的效果. 比如图中的"风花雪月与古镇火山-....."后面"...."就是一段文字显示不下的时候默认隐藏然后用-来代替. 只需要给元素 ...
html 多余的文字显示为省略号
在html中如果要把多余的文字显示为省略号,那么有以下几种方法一.单行文本. 需要自行复制: /*设置单行文本的固定写法 *//* 设置固定的宽度 */width: 400px;/* 设置文本不换行 ...
CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
CSS隐藏多余文字的几个方法
通常偏移掉字体的方式是 (1) 使用text-indent:-9999px; 可是他有一个局限性他只适用于块级元素block 而我们往往有时候想偏移掉的a上的字体所以问题就来了 text-inde ...
CSS设置文本不换行多余文字显示省略号
文章目录一.使用步骤一.使用步骤 1.文字单行不换行多余文字显示省略号代码如下(示例): white-space: nowrap;display: block;overflow: hidden; ...

多余文字隐藏用省略号代替

多余文字隐藏用省略号代替相关推荐

最新文章

热门文章