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

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. html5 的缓存应用 manifest="filename.appcache"

    启动html5的应用缓存 <!DOCTYPE HTML> <html manifest="filename.appcache"> </html> ...

  2. PHP中关于超链接的拼接问题

    <?php$link = " http://www.baidu.com";echo '<a href='.$link.'> 百度 </a>';?> ...

  3. Flex文件读取报错

    Flex文件读取 1.s:WindowedApplication <?xml version="1.0" encoding="utf-8"?> &l ...

  4. linux下oracle11g R2的启动与关闭监听、数据库

    su - oracle           切换到oracle账户 lsnrctl start          启动监听 sqlplus /nolog     登陆sqlplus conn /as  ...

  5. C# String.Format

    C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0:D3}", 2) 002 E 科学 ...

  6. unity3d脚本编程

    一 创建和使用脚本 1 概述 GameObject的行为都是被附加到其上面的组件控制,脚本本质上也是一个组件. 在unity中创建一个脚本,默认内容例如以下: using UnityEngine; u ...

  7. Linux网卡高级命令、IP别名及多网卡绑定 转

    http://www.cnblogs.com/xiaoluo501395377/archive/2013/05/26/3100065.html 本篇随笔将详细讲解Linux系统的网卡高级命令.IP别名 ...

  8. 使用@media实现IE hack的方法

    文章简介:众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直 ...

  9. [vba]excel中求选中数据和为给定数所有的组合

    昨天下午开始学习的vba,累死了,肯定有bug,待调试 vba程序如下: Dim aSum As Integer Dim tSum As Integer ) As Integer Dim arrMax ...

  10. npm常用命令->nodejs

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...