【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;

 

完结!


目录
打赏
0
0
0
0
17
分享
相关文章
|
4月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
44 6
|
4月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
52 6
|
4月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
36 1
常见 CSS 选择器用法
常见 CSS 选择器用法
51 1
|
6月前
|
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
145 3
前端基础(五)_CSS文本文字属性、背景颜色属性
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
78 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等