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. Appium定位 5 ——xpath

    今天我们先来和大家说一下appium,上一次说到了定位,不知道大家定位的怎么样了,今天来说如何定位xpath,五分钟即可学会: 例1: 现在我想定位下面这个登录按钮: xpath该怎么写呢? 先不管三 ...

  2. OpenStack_Swift源代码分析——Ring的rebalance算法源代码具体分析

    1 Command类中的rebalnace方法 在上篇文章中解说了,创建Ring已经为Ring加入设备.在加入设备后须要对Ring进行平衡,平衡 swift-ring-builder object.b ...

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

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

  4. hadoop之 Hadoop2.2.0中HDFS的高可用性实现原理

    在Hadoop2.0.0之前,NameNode(NN)在HDFS集群中存在单点故障(single point of failure),每一个集群中存在一个NameNode,如果NN所在的机器出现了故障 ...

  5. js前台调用lodop打印

    lodop简单介绍 lodop的打印功能已经非常强大,也在带web端的图形界面,可以供用户使用.使用js在前台调用lodop打印,一般分为两种方法: 1:特殊的指令打印,这种打印方式,是采用的与js无 ...

  6. 编译openvpn在链接时报tuncfg错误

    1. 链接时产生tuncfg错误 init.o: In function `do_persist_tuntap': init.c:(.text+0x24d8): undefined reference ...

  7. Web API 路由访问设置

    前段时间一直致力于MVC webapi 技术的研究,中途也遇到过好多阻碍,特别是api路由的设置和URL的访问形式,所以针对这个问题,特意做出了记录,以供日后有同样困惑的大虾们借鉴: 在Mvc WEB ...

  8. 关于vim搜索/替换功能的两条配置

    之前是直接照着这篇的配置的强大的vim配置文件 自己也只是对vim新建文件修改文件的哪个函数SetTitle()做了点修改,毕竟用vim只写C/C++和python.shell. 没想到今天在用vim ...

  9. 汇编_指令_DS*10H的含义

    在8086存储器系统中,20位地址总线的地址是物理地址.但是由于8086内部寄存器都是16位的, 用16位寄存器直接访问20位存储器空间显然不可能,所以8086CPU使用了存储器分段的办法.这 样内存 ...

  10. Account银行账户

    package com.hanqi; //账户类 public class Account { String ZhangHao; double CunKuanYuE; Account(String Z ...