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

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. （剑指Offer）面试题23：从上到下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 很明显,这是一个广度优先遍历. 需要一个队列容器来保存结点,具体操作: 1.将根结点压入队列中,并打印根结点:如果根结点有子结点 ...

  2. HDU 5573 Binary Tree 构造

    Binary Tree 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5573 Description The Old Frog King lives ...

  3. Mac下PHP环境的搭建

    Mac下PHP环境的搭建 目录 Mac下PHP环境的搭建(基于XAMPP) phpmyadmin Mac下PHP环境的搭建(基于XAMPP) 下载XAMPP的Mac版 启动Apache Web Ser ...

  4. 位图字体生成工具Bitmap Font Generator的使用

    首先,说下为什么要使用这款工具作为cocos2d-x的字体生成工具.其实cocos2d-x能使用的字体生成工具也有好几个,当然了本人也没有全部使用过,就不一一说明了.Bitmap Font Gener ...

  5. HDOJ 1301 Jungle Roads

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1301 //HDOJ1301 #include<iostream>#include<c ...

  6. Fedora 23如何安装LAMP服务器

    LAMP 是开源系统上 Web 服务器的梦幻组合.LAMP 是 Linux. Apache HTTP 服务. MySQL/MariaDB 数据库和 PHP. Perl 或 Python 的简称. 下面 ...

  7. nginx多进程模型之配置热加载---转

    http://blog.csdn.net/brainkick/article/details/7176405 前言: 服务器程序通常都会通过相应的配置文件来控制服务器的工作.很多情况下,配置文件会经常 ...

  8. Puppet

    一个完整的自动化运维包括系统安装.配置管理.服务监控三个方面.那今天咱们大家一起来学习一下Puppet实际运维中的案例.仅供参考,欢迎大家提更多的意见! 一.应用背景 某公司新到500台服务器,需要安 ...

  9. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  10. SQL Server 数据库文件管理

    关于数据库文件的管理问题,我经常说,常在江湖混,哪有不挨棍,用的时间长了,基本上都有遇到一些数据库文件管理上的问题,比如说: 1. SQL Server数据文件空间满 2. 日志文件暴涨 3. 文件不 ...