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

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. Mysql 数据备份导出

    mysqldump导出整个数据库mysqldump --single-transaction --skip-lock-tables -uDBUSER -pDBPASSWD -hDBIP \--defa ...

  2. 支持markwon写ppt的工具marp-调研

    1.需求 使用markdown写ppt 支持大部分markdown语法,含高亮.公式及表格等 支持转为html,在浏览器中展示 2.调研 符合条件的工具:marp 用法参考 Marp之简单编写PPT格 ...

  3. 用决策树(CART)解决iris分类问题

    首先先看Iris数据集 Sepal.Length--花萼长度 Sepal.Width--花萼宽度 Petal.Length--花瓣长度 Petal.Width--花瓣宽度 通过上述4中属性可以预测花卉 ...

  4. 【BZOJ5322】[JXOI2018]排序问题（模拟）

    [BZOJ5322][JXOI2018]排序问题(模拟) 题面 BZOJ 洛谷 题解 这题就显得很呆. 显然就是每次找到\([l,r]\)中出现次数最小的那个数并且放一个. 然后随便模拟一下就好了Qw ...

  5. hexo报错集锦

    1.报错信息如下 FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubles ...

  6. 对于rqy今天讲座的一些理解和看法吧

    其实我本来以为今天晚上要学高数的,但是听到任大佬要来讲课,我自然是很开心. 其实真正接触到他和照片给我的感觉完全不一样,rqy是一个非常单一的,没有在意其他过多的事情的人,包括从他的讲座来看,大佬把自 ...

  7. Dockerfile技巧

    换镜像源 Ubuntu RUN sed -i 's/archive.ubuntu.com/mirrors.tuna.tsinghua.edu.cn/g' /etc/apt/sources.list A ...

  8. poj3630 Phone List

    spy on一下,发现是trie裸题,结果一交就T... 然后把cin改成scanf就A了... trie的空间一定要开足,要不然RE #include <cstdio> #include ...

  9. 利用selenium并使用gevent爬取动态网页数据

    首先要下载相应的库 gevent协程库:pip install gevent selenium模拟浏览器访问库:pip install selenium selenium库相应驱动配置  https: ...

  10. ERRORS: ?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.

    Ubuntu下,运行django项目的时候失败,报错: (env36) root@JD:~/xueyiwang# python manage.py runserver 0.0.0.0:8000 Per ...