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. My Test about Mat

    一.创建Mat >Mat a = cv::Mat(2,2,CV_32S,1); output:  [1,1; 1,1] >Mat a = cv::Mat(2,2,CV_32SC3,1); ...

  2. springboot: 集成freemark模板引擎

    1.freemark简介(摘自:http://blog.csdn.net/liaomin416100569/article/details/78349072) 在互联网软件内容网站中 一般首页的访问量 ...

  3. 洛谷八连测R4

    1.逃避 https://www.luogu.org/problemnew/show/T14561 注意: 1.输入时需要用EOF判断,否则会TLE. 2.用flag判断字符是不是每一句首字母. 3. ...

  4. 【转】用JMeter来测试Tomcat的性能

    JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现,最新的版本是1.9.1,大家可以到http://jakarta.apache.org/jmeter/ ...

  5. 阿里云中域名的MX记录添加方法

    如何添加阿里云的MX记录 1. 登录阿里云,点击“云解析”,点击自己想要添加MX记录的域名: 2. 点击新手引导设置: 3. 点击解析设置,自动跳出“设置网站”和“设置邮箱”: 4. 跳出的页面,选择 ...

  6. grep 小技巧

    转自:http://www.cnblogs.com/itech/archive/2012/10/18/2729944.html 1) grep命令加- E参数,这一扩展允许使用扩展模式匹配.例如,要抽 ...

  7. 第六章 通过Service访问Pod(中)

    6.2 Cluster IP 底层实现 Cluster IP 是一个虚拟IP,是由K8s节点上的iptables规则管理的. 使用类似轮询的方法访问Pod. 6.3 DNS 访问Service 在Cl ...

  8. Druid.io系列（二）：基本概念与架构

    原文链接:  https://blog.csdn.net/njpjsoftdev/article/details/52955788 在介绍Druid架构之前,我们先结合有关OLAP的基本原理来理解Dr ...

  9. OD 实验(十三) - 对一个程序的逆向

    程序: 运行程序 点击 Start,它就会进行对系统的扫描 点击 About -> Enter Registration Code 随便输入一下内容,点击 OK,会弹出该弹窗 用 PEiD 看一 ...

  10. Python Tuples

    1. basic Tuples is a sequence of immutable object. It's a sequence, just like List. However, it cann ...