用css实现文本不换行切超出限制时显示省略号（小tips）
div{
max-width: 500px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;/*文本不换行*/
}
如上代码所示，限制文段宽度，可用width或max-width，方法简单但实用。
用css实现文本不换行切超出限制时显示省略号（小tips）的更多相关文章
- HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css实现文本两行或多行文本溢出显示省略号
word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-b ...
- CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- js实现多行文本超出一定字数显示省略号功能
最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- CSS - div中的文字不换行，超出宽度就用省略号表示
问题 过多的文字会把盒子撑开,造成布局错乱. 解决 .card-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidd ...
随机推荐
- baidu手机输入法：邂逅"吹神"的声场漫游
"十年,好久不见,兄妹,所有还好?年月如歌,你的背包.却仍然没有筛选.装满红玫瑰.人来人往,爱情搬运,纵使我成了K歌之王.也谢谢你.依然让我的全世界失眠. 孤单患者.不如不见,不要说 ...
- 在 FastAdmin 中启动 ThinkPHP 5 的请求缓存分析
在 FastAdmin 中启动 ThinkPHP 5 的请求缓存分析 缓存的基础配置 ThinkPHP 5 中有一个请求缓存:1 'request_cache' => true, 'reques ...
- linux的mysql
mysql https://www.cnblogs.com/cnblogsfans/archive/2009/09/21/1570942.html https://blog.csdn.net/Smal ...
- 简单安装MySQL（RPM方式）
本次测试使用一台ip为192.168.2.21的虚拟机 下边的步骤虽然多,但是跟着命令或者复制粘贴命令即可完成操作,并无难点 1.安装准备 MySQL-server-5.6.35-1.linux_gl ...
- DeepLearning4J 环境搭建【转】
深度学习Deeplearning4j eclipse 开发环境搭建 eclipse设置deeplearning4j开发环境:手动添加jar包 https://deeplearning4j.org/cn ...
- Unit07： document 对象 、 自定义对象 、 事件
Unit07: document 对象 . 自定义对象 . 事件 知识点: <!DOCTYPE html> <html> <head> <meta chars ...
- c++ 异常处理（3）
<C++编码规范与指导>一文,就已经规划着要加入这样一篇讨论 C++ 异常机制的文章了.没想到时隔几年以后才有机会把这个尾巴补完 :-). 还是那句开场白:“在恰当的场合使用恰当的特性” ...
- 确保nginx安全的10个技巧
Nginx是当今最流行的Web服务器之一.它为世界上7%的web流量提供服务而且正在以惊人的速度增长.它是个让人惊奇的服务器,我愿意部署它. 下面是一个常见安全陷阱和解决方案的列表,它可以辅助来确保你 ...
- 黄聪：免费C#反编译软件工具。Reflector已经out了，试试ILSpy吧
转载自:http://www.cnblogs.com/JamesLi2015/archive/2011/09/08/2170519.html Reflector是.NET开发中必备的反编译工具.即使没 ...
- 适配：px与dp转换
public class DensityUtil { /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */ public static int dip2px(Context con ...