CSS文字省略号

简介: CSS文字省略号

一、单行超出显示省略号


如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行;


详细步骤:


第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略)

第二步(溢出隐藏)overflow:hidden;

第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号)




二、多行超出显示

 

省略号

对于内核是webkit的浏览器(Google/Safari),可以直接用CSS样式;


溢出隐藏:overflow: hidden;


省略号:text-overflow: ellipsis; display: -webkit-box;


弹性盒模型:


设置弹性盒子的子元素的排列方式 :-webkit-box-orient: vertical;


设置显示文本的行数:-webkit-line-clamp: 5; (最多显示5行)



fd55f3c448d2f49920f210a1d9bb2dd5_3ffbd5ac5bb36311af2557f544bab972.jpg

相关文章
|
14天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
13 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
42 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
2月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本,并在其上使用绝对定位的伪元素与之重叠,实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程,同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了,便于理解和实践。
27 1
css实现涂绘文字的效果
|
2月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
56 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
2月前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!
|
3月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
1415 1
|
3月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
61 2
|
3月前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
184 0