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. 《selenium2 python 自动化测试实战》（11）——selenium安装版本

    先和大家说一下selenium环境的问题,大家可以在cmd里先看一下自己的selenium版本: 回车,就可以安装了. 本来想和大家说如何跳过验证码进行登录的,结果好多朋友加我问我环境配置的问题,所以 ...

  2. ballerina 学习五 使用composer管理ballerina 项目

    1. 启动 composer 备注: 因为这个命名和php的一个包管理工具重名了,所以可能需要使用决定路径 比如我的mac系统使用:Library/Ballerina/ballerina-0.970. ...

  3. 安装 Ruby, Rails 运行环境

    步骤1 - 安装 RVM RVM 是干什么的这里就不解释了,后面你将会慢慢搞明白. $ gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1 ...

  4. bzoj2748(HAOI2018)音量调节

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2748 水得不想写.别忘了-1. #include<iostream> #incl ...

  5. Python中文报错问题

    异常信息:SyntaxError: Non-ASCII character '\xe6' in file D:/pythonlearning/HelloPython.py on line 8, but ...

  6. python中format函数学习笔记

    简而言之,format函数就是用{}来代替之前的输出字符时使用的% print('my name is %s and I am %d years old' % ('porsche',23)) 下面详细 ...

  7. 用活firewalld防火墙中的zone

    原文地址:http://www.excelib.com/article/290/show firewalld中zone的含义学生前面已经给大家介绍过了,说白了一个zone就是一套规则集.可是什么时候该 ...

  8. android 手机UDP 接受不到数据

    一.有的手机不能直接接收UDP包,可能是手机厂商在定制Rom的时候把这个功能给关掉了. 1.可先在oncreate()方法里面实例化一个WifiManager.MulticastLock 对象lock ...

  9. JDK 9 & JDK 10 新特性

    JDK 9 新增了不少特性,官方文档:https://docs.oracle.com/javase/9/whatsnew/toc.htm#JSNEW-GUID-527735CF-44E1-4144-9 ...

  10. LWIP在STM32实现

    http://www.openedv.com/posts/list/25178.htm