CSS 文字超出变为省略号

简介: CSS 文字超出变为省略号

1.单行文本溢出显示符号--必须满足三个条件


width: 100px


先强制一行内显示文本

white-space:nowrap; (默认 normal 自动换行)


超出的部分隐藏

overflow:hidden;


文字用省略号代替超出的部分

text-overflow:ellipsis;


2.多行文本溢出显示省略号


  • width: 100px
  • overflow:hidden;
  • text-overflow:ellipsis;
  • 弹性伸缩盒子模型显示
  • display: -webkit-box;
  • 限制在一个块元素的文本的行数
  • -webkit-line-clamp:2;
  • 设置或检索伸缩盒对象的子元素的排列方式
  • -webkit-box-orient: vertical;
目录
相关文章
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
31 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
55 1
简单几行代码CSS实现网页自动打文字效果
|
2月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
1月前
|
Web App开发 前端开发 iOS开发
|
2月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
84 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
3月前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)