多行文本溢出显示省略号(…) +css样式

简介: 多行文本溢出显示省略号(…) +css样式

今天怂怂就为大家分享一篇通过css样式使文本在一行内显示,超出则加省略号的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随怂怂过来看看吧


超出隐藏(overflow:hidden;)


强制在同一行显示(white-space: nowrap;)


省略号(text-overflow:ellipsis;)


直接放代码:代码三连击!


style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis";

 

ps:

white-space属性

定义:white-space 属性设置如何处理元素内的空白。·

实例:规定段落中的文本不进行换行:就是说在一行显示

p{ white-space: nowrap;}



4·0.PNG

目录
相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
33 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
16天前
|
前端开发
|
20天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
24天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
21 9
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
23 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式