div{

    max-width: 500px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;/*文本不换行*/

}

如上代码所示，限制文段宽度，可用width或max-width，方法简单但实用。

用css实现文本不换行切超出限制时显示省略号（小tips）的更多相关文章

  1. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  2. css实现文本两行或多行文本溢出显示省略号

    word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-b ...

  3. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  4. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  5. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  6. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. js实现多行文本超出一定字数显示省略号功能

    最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...

  8. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  9. CSS - div中的文字不换行，超出宽度就用省略号表示

    问题 过多的文字会把盒子撑开,造成布局错乱. 解决 .card-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidd ...

随机推荐

  1. 异常处理过程和异常处理的执行顺序（针对try{}catch{}finally{}而言）

    1.异常的处理方式有两种分别为:try{}catch{}finally{}和throws下面简单说一下这两者的区别和联系. 2.出现异常之后如果没有进行捕获处理系统就会直接将这个异常栈的跟踪信息直接打 ...

  2. input type = number 去除上下箭头，禁用滚轮事件（默认的自带滚轮加减数字）

    <style type="text/css"> /*盒子大小从边框开始计算*/ html * { box-sizing: border-box; } /*解决模态框抖动 ...

  3. Linux 错误码对照表

    errno 在 <errno.h> 中定义,错误 Exx 的宏定义在 /usr/include/asm-generic 文件夹下面的  errno-base.h 和 errno.h,分别定 ...

  4. jQuery的deferred对象详解（转载）

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本.(由于无法转载,复制原文 .原文链接——原作者:阮一峰) 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5. ...

  5. 当Ucenter和应用通信失败,DZ数据库备份恢复

    http://blog.sina.com.cn/s/blog_775f158f010135uz.html ucenter整合自己的项目 http://jingyan.baidu.com/article ...

  6. SharePoint2013切换帐户登录菜单显示

    SharePoint2013帐户姓名显示的地方没有切换帐户的菜单,这个功能对于终端用户是可有可无的,但对于sharepoint管理员或sharepoint开发人员来讲,却是一个很重要的菜单,由于经常要 ...

  7. Python中的url编码问题

    >>> import urllib >>> a = "PythonTab中文网" >>> a 'PythonTab\xe4\x ...

  8. 为什么Java程序占用的内存比实际分配给它的要多

    很多人错误的认为运行Java程序时使用-Xmx和-Xms参数指定的就是程序将会占用的内存,但是这实际上只是Java堆对象将会占用的内存.堆只是影响Java程序占用内存数量的一个因素.要更好的理解你的J ...

  9. 第十三章 hadoop机架感知

    背景 分布式的集群通常包含非常多的机器,由于受到机架槽位和交换机网口的限制,通常大型的分布式集群都会跨好几个机架,由多个机架上的机器共同组成一个分布式集群.机架内的机器之间的网络速度通常都会高于跨机架 ...

  10. video2gift环境安装（Theano等）

    pip install Theano http://deeplearning.net/software/theano/install_centos6.html pip install moviepy ...