源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] 字符串过长CSS截取多余文字并用省略号显示

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-6-16 15:34:16 | 显示全部楼层 |阅读模式
字符串过长,不雅观,如何实现多余文字街去掉并用省略号显示,苦思冥想多日,发现使用CSS就可轻松搞定,下面将经验心得与大家分享一番,望帮助更多的失足新手 最近才知道css也有这么叼炸天的一面~~~

做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个“我的名字好长呀,你该怎么办呢”,那老衲不就狂急了~~

幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家

很简单,话不多说,直接上代码:

css里面如下设置:

复制代码代码如下:
a.name{
line-height: 30px;
text-align: center;
<span style="color:#ff0000;">text-overflow:ellipsis;</span>//让超出的用...实现
<span style="color:#ff0000;">white-space:nowrap;</span>//禁止换行
<span style="color:#ff0000;">overflow:hidden;</span>//超出的隐藏
display: block;
}

我是用a标签写的用户名,所以要display:block一下。

唔,很简单,不过很好用。(PS:不支持IE6!)
回复

使用道具 举报

0

主题

1万

回帖

87

积分

注册会员

Rank: 2

积分
87
发表于 2022-9-12 04:48:00 | 显示全部楼层
啦啦啦啦啦啦啦啦!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2022-10-25 14:46:16 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-3-27 08:22:05 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-25 16:10:06 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2023-6-13 23:57:43 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-29 18:55:21 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-3 22:14:39 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-28 01:09:25 | 显示全部楼层
1312315458748777
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2023-11-29 08:51:31 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-30 02:36 , Processed in 0.148199 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表