【CSS用法】css限制一行文字数量,超出部分用省略号显示

简介: 【CSS用法】css限制一行文字数量,超出部分用省略号显示

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。

CSS代码:

text-overflow:ellipsis;     // 用省略号

overflow:hidden;    // 超出部分隐藏

white-space:nowrap;    // 文本不换行,这样超出一行的部分被截取,显示...

说明:

text-overflow:    用来设置是否使用一个省略标记(···)标示对象内文本的溢出。

white-space:nowrap;     强制文本在一行内显示。

overflow:hidden;    溢出内容为隐藏。

必须三者同时用的时候才会实现溢出文本显示省略号

附:多行显示的方法:

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;    // 设置显示几行

-webkit-box-orient: vertical;

 

完结!


相关文章
|
2月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
36 6
|
2月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
42 6
|
2月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
28 1
|
2月前
|
前端开发
常见 CSS 选择器用法
常见 CSS 选择器用法
40 1
|
4月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
94 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
5月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
66 1
|
4月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
3月前
|
Web App开发 前端开发 iOS开发
|
4月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
前端开发 弹性计算
css文本超出2行就隐藏并且显示省略号
首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得。
4557 0