项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上。虽然用的多,但是我也不知道为啥,我始终记不住。所以,通过这种方式,让自己加深一下印象

情况一:单行文字超出规定宽度后,以省略号形式展示

具体的样式如图:

代码:

.css{
width:200px;//示例宽度
height:40px;//示例高度
overflow:hidden;
width-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

情况二:多行文字超出规定宽度和高度后,以省略号形式展示

这种情况需要给装文字的盒子设置属性为box属性;

代码:

.css{
width:200px;
height:100px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:;//根据业务需求设置
overflow:hidden; }

css中多余文字省略号显示的更多相关文章

  1. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  2. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  3. android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边

    很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: ​ 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...

  4. CSS隐藏多余文字的几个方法

    通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:- ...

  5. 微信小程序 wxml 文件中如何让多余文本省略号显示?

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...

  6. css设置两行多余文字用..显示

    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;

  7. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  8. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  9. 关于button中设置文字不显示的问题

    这个因为使用的image加载方式是setimage而不是setbackgroundimage导致文字始终出不来.

随机推荐

  1. HDU - 1495 非常可乐 【BFS】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1495 思路 首先 如果可乐的体积 是奇数 那么是无解的 然后 如果能够得到两杯 都是一般容量的可乐 那 ...

  2. cdcqの省选膜你赛 题解

    题解: 第一题: 有一个很明显的性质:后面的修改不会对前面的询问做出影响,CDQ分治套上BIT即可. 第二题: 有一个类似于斜率的形式,分数规划套上树分治,码量稍大,细节稍多. 最后20W的点出题人原 ...

  3. 用ant编译打包时 警告:编码 GBK 的不可映射字符

    原因,参考http://zhidao.baidu.com/question/26901568.html 添加如下的红色一行后编译通过<target name="compile" ...

  4. html5手机网站需要加的那些meta标签,手机网站自适应

    的html5相关meta和标签    a.<!-- 强制让文档与设备的宽度保持1:1 -->    <meta name="viewport" content=& ...

  5. BZOJ 3410 [Usaco2009 Dec]Selfish Grazing 自私的食草者:贪心【最多线段覆盖】

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1324 题意: 给你n个区间,问你最多能选择多少个区间使得它们不相互覆盖. 题解: RQ ...

  6. window/body/img/iframe 的onload事件

    在html页面中,只有body,img,iframe这一类标签具有onload事件. onload事件表示在当前元素载入完成后发生的事件.其中,window也有onload事件,但是跟body的是同一 ...

  7. poj 2069 Super Star——模拟退火(收敛)

    题目:http://poj.org/problem?id=2069 不是随机走,而是每次向最远的点逼近.而且也不是向该点逼近随意值,而是按那个比例:这样就总是接受,但答案还是要取min更新. 不知那个 ...

  8. BZOJ3932:[CQOI2015]任务查询系统

    浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...

  9. 洛谷【P3960】列队

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.luogu.org/problemnew/show/ ...

  10. Visual Studio 编译后去掉只读属性

    Visual Studio 编译后去掉只读属性 attrib $(TargetPath) -R attrib $(TargetDir)$(TargetName).pdb -R