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

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

具体的样式如图:

代码:

.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. hihocoder 微软编程之美2015 初赛 第一场 (树算法 + 暴力思想 + 搜索思想)

    题目1 : 彩色的树 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定一棵n个节点的树,节点编号为1, 2, …, n.树中有n - 1条边,任意两个节点间恰好有一条路 ...

  2. oracle-数据库的各种-锁-详解

    数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性. 如果是单用户的 ...

  3. 数据库,序列化数据为json字符串

    create PROCEDURE [dbo].[usp_SerializeJSON] @ParameterSQL as varchar(max) AS BEGIN declare @SQL nvarc ...

  4. latex编译过程-关于嵌入所有字体

    我们的初始目的是想在编译的过程中嵌入所有字体 参考 我们进行了设置,但是不起作用,后发现使用pdflatex编译时是不会调用 ps2pdf的 然后,我们就需要了解编译过程 1. 通常,我们使用texs ...

  5. 【HDU 4807】Lunch Time 最小费用最大流

    题意 在一个有向图当中,现在每一条边带有一个容量,现在有K个人在起点,需要到终点去吃饭,询问这K个人最后一个人到达食堂的最小时间是多少 贴一篇题解:http://blog.csdn.net/u0137 ...

  6. CodeForces - 884F :Anti-Palindromize(贪心&费用流)

    A string a of length m is called antipalindromic iff m is even, and for each i (1 ≤ i ≤ m) ai ≠ am - ...

  7. js 时间格式处理插件 moment

    官网: http://momentjs.cn/docs/#/plugins/ 各种API官网上都有详细的例子,这里就不做一一说明. 重点讲两个常用的: 一.获取当前日期 moment().format ...

  8. 开发工作之外的修炼Live笔记

    “开发工作之外的修炼”这期Live分享了下列话题: [1] 如何发现自己的兴趣 [2] 财富.资源与被动收入 [3] 目标管理 [4] 快速做选择 [5] 时间管理 [6] 如何投资自己 >&g ...

  9. uC/OS-II源码分析(三)

    首先来了解下实时系统的基本概念: 1) 临界区,共享资源,任务(类似于进程),任务切换,任务调度,可剥夺型内核,可重入函数,动态优先级调度, 2) 如何处理优先级反转问题.这个问题描述如下:有三个任务 ...

  10. BZOJ2329:[HNOI2011]括号修复

    浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...