文本超出一定宽度让其隐藏，以省略号替代

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

如下图

css3实现单行文本溢出显示省略号的更多相关文章

  1. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  2. CSS实现单行文本溢出显示省略号

    p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...

  3. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  4. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  5. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  6. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  7. WEB-CSS实现单行（多行）文本溢出显示省略号

    //单行文本溢出部分隐藏显示省略号...overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /** n 行文本溢出部分隐藏显示 ...

  8. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  9. ZH奶酪：HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

随机推荐

  1. python学习日记（python2/3区别补充，is / id/ encode str,bytes）

    python2和python3区别 print python2中,print 是语句 :用法 ---->print '***' python3中,print 是函数:用法----->pri ...

  2. 最小表示法模板（洛谷P1368 工艺）（最小表示法）

    洛谷题目传送门 最小表示是指一个字符串通过循环位移变换(第一个移到最后一个)所能得到的字典序最小的字符串. 因为是环状的,所以肯定要先转化为序列,把原串倍长. 设决策点为一个表示法的开头.比较两个决策 ...

  3. Android ViewSwitcher 的功能与用法

    ViewSwitcher 代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitch ...

  4. 【BZOJ4316】小C的独立集（仙人掌，动态规划）

    [BZOJ4316]小C的独立集(仙人掌,动态规划) 题面 BZOJ 题解 除了普通的动态规划以外,这题还可以用仙人掌的做法来做. 这里没有必要把圆方树给建立出来 \(Tarjan\)的本质其实就是一 ...

  5. rt-thread之 for (fn_ptr = &__rt_init_rti_board_start; fn_ptr < &__rt_init_rti_board_end; fn_ptr++) 理解

    @2019-01-30 [小记] 利用宏 INIT_EXPORT() --- __attribute__() 将函数重新放置在自定义段,执行时去该段获取函数地址 RT-Thread 的 INIT_BO ...

  6. MVC使用记录

    如何获得MVC中,控制器和方法名字.这可以用于给当前选定菜单加个选定样式 获取控制器名称:(在View中写法) ViewContext.RouteData.Values["controlle ...

  7. 洛谷 P4705 玩游戏 解题报告

    P4705 玩游戏 题意:给长为\(n\)的\(\{a_i\}\)和长为\(m\)的\(\{b_i\}\),设 \[ f(x)=\sum_{k\ge 0}\sum_{i=1}^n\sum_{j=1}^ ...

  8. Codeforces 1079D Barcelonian Distance（计算几何）

    题目链接:Barcelonian Distance 题意:给定方格坐标,方格坐标上有两个点A,B和一条直线.规定:直线上沿直线走,否则沿方格走.求A到B的最短距离. 题解:通过直线到达的:A.B两点都 ...

  9. Eclipse Memory Analyzer（MAT）使用

    https://user.qzone.qq.com/731573705/blog/1436389384 Eclipse Memory Analyzer(MAT)使用  一.OutOfMemoryErr ...

  10. 【linux】/dev/null作用和/dev/random

    一.  /dev/null /dev/null属于字符特殊文件,它属于空设备,是一个特殊的设备文件,它会丢弃一切写入其中的数据,写入它的内容都会永远丢失,而且没有任何可以读取的内容. 我们用file命 ...