CSS单行文本溢出显示省略号
如何让单行文本溢出显示省略号呢？
操作步骤
建立简单的html样式
第一步：限定范围 width:;
第二步：强制文本不换行 white-space:nowrap;
第三步：溢出隐藏 overflow:hidden;
第四步：显示省略号 text-overflow:ellipsis;
可以看到，效果已经达到了。
知识拓展
白色空间的处理（white-space）
| white-space:nowrap; | 忽略空白符，一行显示到底 |
| white-space:pre; | 保留所有空白符不换行 |
| white-space:pre-line; | 合并空白符，保留换行符 |
| white-space：pre-wrap； | 保留所有空白符，保留换行符 |
溢出处理（overflow）
| overflow:hidden; | 溢出隐藏 |
| overflow:auto; | 如果溢出才有滚动条 |
| overflow:scroll; | 不管溢出还是不溢出都有滚动条 |
| overflow:visible; | 默认值 |
显示省略号（text-overflow）
| text-overflow:ellipsis; | 显示省略号 |
| text-overflow:clip; | 默认值 |
CSS单行文本溢出显示省略号相关推荐
- css 单行文本溢出显示省略号
有时候我们会遇到这样的情景,在一行显示过长的文字时会溢出,页面将变得很丑陋.这时候我们想要只显示一部分文字,将多余部分以省略号 "..." 的形式显示.那么我们可以通过设置 CSS ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
- 单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS实现文本溢出显示省略号
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- css之-单行文本溢出显示省略号，多行文本溢出显示省略号
单行显示省略号 white-spacing:nowrap; overflow:hidden; text-overflow:ellipsis; 规定某行显示省略号 -webkit-line-climp: ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
- CSS文本溢出显示省略号怎么实现？
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
最新文章
- 4.Azure创建点到站点的***隧道（下）
- CSS 字体、边框阴影
- 我看中国软件---管理篇
- IOleItemContainer的接口定义
- Linux 抓包工具：tcpdump
- net 架构师-数据库-sql server-触发器
- 英语学习笔记2019-10-25
- npm 有用的一些全局包
- Android开发之TextView的滚动显示
- @Valid注解的使用
- string会被回收吗_互联网大厂面试题：这些面试都会吗？就想要30k？
- 2015年Java开发岗位面试题归类
- gcc include lib路径扩展
- Python学习笔记 之 变量进阶
- mysql initialsize,单机数据库优化
- Flutter 实现 仿Android原生启动模式SingleTask
- FIT2CLOUD飞致云旗下多云管理平台完成华为FusionCompute兼容性测试
- gnu stubs arch linux,Linux 编译应用程序报错：fatal error: gnu/stubs-soft.h: No such file or directory...
- 超级简单的三次方程求解！
- 树形选择排序(锦标赛排序)