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. webpack 图片资源处理

    备注:  css 引用图片资源 1. 安装loader yarn add file-loader --dev 2. 配置 const path = require("path"); ...

  2. Service Mesh 了解

    是什么 Service Mesh是专用的基础设施层. 轻量级高性能网络代理. 提供安全的.快速的.可靠地服务间通讯. 与实际应用部署一起但对应用是透明的 作用 提供熔断机制(circuit-break ...

  3. 中兴G718C开发者模式开启

    系统设置--关于手机--版本号,连按七次,打开开发者选项 请进入设置——连接到PC——默认连接类型——安装驱动,选择即可.然后将手机和电脑连接,打开“我的电脑”或“计算机”会弹出可移动盘符“USB D ...

  4. 一次解决spark history server日志不见

    通过cloudera的旧版VM(centos6版本)跑spark,之后,想看一下日志研究一下job,stage以及task,压力很大的发现完全没有日志,180088页面打开后: Event log d ...

  5. Linux VPS禁止某个IP访问

    http://www.vpser.net/security/linux-vps-deny-ip.html

  6. Mysql中的GROUP_CONCAT使用

    SELECT res.ITRId Id, res.ITRResourceName ResourceName, res.ITRSupplierName SupplierName, res.ITRDept ...

  7. laravel 中事务的使用

    在laravel5.3中使用事务 可以直接使用\DB::beginTransaction();使用 前提是数据库表必须支持事务,目前mysql中表类型只有InnoDb支持事务 想要在一个数据库事务中运 ...

  8. linux性能监控——CPU、Memory、IO、Network

    一.CPU 1.良好状态指标 CPU利用率:User Time <= 70%,System Time <= 35%,User Time + System Time <= 70%. 上 ...

  9. Python库-re(正则表达式)

    re库是python的一个标准库,不需要自己用pip额外下载,直接调用即可. 下面介绍以下库中函数的作用. 1.re.compile(patter, flags=0) patter是一个正则表达式字符 ...

  10. Java中的<< 和 >> 和 >>> 详细分析

    <<表示左移移,不分正负数,低位补0: 注:以下数据类型默认为byte-8位 左移时不管正负,低位补0 正数:r = 20 << 2 20的二进制补码:0001 0100 向左 ...