您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

CSS截取字符串显示省略号的技巧

作者:佚名    责任编辑:admin    更新时间:2022-06-22

大家知道CSS截取字符串显示省略号吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验,在此拿出来与大家分享下,请大家互相指正。

有时候,为了避免页面中某个Div的内容过多,而导致页面变形,我们通常在CSs中定义overflow:hidden,这样会不显示文字,不过看上去用户体验不太好,为了获得最佳的用户体验,我们在隐藏文字的同时,可以在文字后边显示省略号,CSS中有现成的方法可以用,比如下面对CSS的定义:

1/*CSS代码如下:*/

2show{

3overflow:hidden;

4white-space:nowrap;

5text-overflow:ellipsis;

6/*为你显示文字的div添加宽度定义,当超出宽度时会自动添加省略号*/

7width:30px;

8}

在上述代码中,text-overflow:ellipsis就是显示省略号的,很不错吧?

相信大家已经学会CSS截取字符串显示省略号了吧!感谢大家对我们网站的支持!

相关推荐:

CSSfontshiy使用技巧是什么