字符串过长CSS截取多余文字并用省略号显示
发布时间：2014-06-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！）
做个类似论坛的页面，用户头像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！）
相关文章
- 单行文本的控制，以前是由程序员完成的，2008-10-17
- 这篇文章主要介绍了css实现字符串截断并加省略号示例,需要的朋友可以参考下2014-05-08
- 可以通过css样式实现DIV元素中文本超长后自动截断并以省略号结尾，一般情况下都是使用javascript，其实使用纯CSS样式也可以做到2014-05-05
- 这篇文章主要介绍了css样式怎么显示省略号，即当超过自定义宽度时隐藏显示省略标记，比较实用，需要的朋友可以参考下2014-04-18
- DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇2014-11-12
- 兼容浏览器的CSS控制字符宽度省略号效果，是非常实用的，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区2009-01-03
- 在项目中我们经常需要在文本过长时显示，将文本超出的部分内容用省略号代替，基于css代码是怎么实现的呢？下面脚本之家小编通过分析本文给大家详解，感兴趣的朋友一起学习2016-01-19
最新评论