一、添加-文字显示超出范围时隐藏属性

overflow:hidden;

二、添加-超出文字省略号属性

text-overflow:ellipsis;

三、添加-文字不换行属性

white-space:nowrap;

CSS - 实现文字显示过长时用省略的更多相关文章

  1. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  2. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  3. css控制文字显示长度，超过用省略号替代

    .line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span cl ...

  4. ant design table td 文字显示过长添加省略号、ant 文字过长时添加tootip提示

    方法1: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit ...

  5. css：文章标题过长时，使用省略号

    html代码 <ul> <li><a href="" target="_blank">我是文章1,现在标题过长,使用css加 ...

  6. css让文字显示特定行数，多余的显示省略号

    /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...

  7. 使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）

    前言 有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显 ...

  8. css 控制文字显示两行,多余用省略号 手机端

    p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...

  9. 关于echarts中的饼状图的label文字显示过长的问题

    label: { normal: { fontSize: 14, formatter(v) { let text = v.name let count = text.indexOf('￥') cons ...

随机推荐

  1. linux-用户建立及权限分配

    1.建立用户   useradd –d /usr/test -m test 此命令创建了一个用户test,用户主目录为/usr/test 2.设置用户密码 .修改自己的密码 passwd ,需要输入旧 ...

  2. wbadmin与vssadmin

    wbadmin作为应用程序,在备份的时候调用vssadmin进行卷影副本备份. 创建分区还原点也是利用了vssadmin. 试验: 1.通过wsb对一个文件夹进行备份,备份完成后在wsb中会有一个副本 ...

  3. 用javascript实现简体和繁体字间的转换

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. YOUYOU深入学习Ganglia之三（gmetad的软件架构）

    Ganglia这个东西,目前的情况是测试的多,真正在数据中心部署过的人少:使用的多,真正能了解其代码架构的人少.这里根据我的经验,分解一下ganglia的gmetad的软件架构,欢迎大家交流. 上面的 ...

  5. 从零开始学android开发-项目重命名

    --修改项目名称 选中项目-[refactor]-[rename] --修改package名称 选中需要重命名的包-[refactor]-[rename] --修改gen下面的名称 打开Android ...

  6. mvc cookie

    Response.Cookies["userName"].Value = "ddd"; <%     if (Request.Cookies[" ...

  7. 【JavaScript】对比12 款优秀的JavaScript MVC/MVVC框架 你最喜欢Backbone or Ember

    http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ 目前基本所以后台程序都是面向对象MVC模式开发, ...

  8. [Express] Level 5: Route file

    Using a Router Instance Let's refactor app.js to use a Router object. Create a new router object and ...

  9. Perl 内部结构详解

    PerlGuts Illustrated Version 0.49, for perl 5.20 and older This document is meant to supplement the  ...

  10. 代码片段 - Golang 创建 .tar.gz 压缩包

    Golang创建 .tar.gz 压缩包 tar 包实现了文件的打包功能,可以将多个文件或目录存储到单一的 .tar 文件中,tar 本身不具有压缩功能,只能打包文件或目录: import " ...