CSS隐藏多余文字的几个方法

简介:

通常偏移掉字体的方式是

(1)
使用text-indent:-9999px;

可是他有一个局限性 他只适用于块级元素block
而我们往往有时候想偏移掉的a上的字体
所以问题就来了
text-indent:-9999px;虽然用起来比较惬意
将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者
这样是不是有些麻烦呢

(2)
line-height:0;
font-size:0;
overflow:hidden;

能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

(3)
最方便的是加个span,然后display:none,而且这样不会出bug。
遗憾的是,多了个标签,循环中使用的话,html又多了一堆字节,单个按钮推荐这样使用。

而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来“偏移”模拟隐藏了
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过

(4)

CSS隱藏多余文字為...

class="g_p_center g_t_right g_c_pdin g_h_20 c08" style="margin-bottom: 15px"> class="g_p_left"> > <div style="width:100px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看,hi.baidu.com/commy,试试看,hi.baidu.com/commy,</div> class="g_blog_list"> class="g_t_center g_c_pdin g_p_center c07 content"> class="ns_content">

语法: 
text-overflow : clip | ellipsis 

参数: 
clip :  不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis :  当对象内文本溢出时显示省略标记(...)

说明: 
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

示例:
div { text-overflow : clip; } 

text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2011/10/14/2211147.html,如需转载请自行联系原作者

相关文章
|
20天前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
31 1
简单几行代码CSS实现网页自动打文字效果
|
8天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
9 1
|
1月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本,并在其上使用绝对定位的伪元素与之重叠,实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程,同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了,便于理解和实践。
23 1
css实现涂绘文字的效果
|
3天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
7 0
|
25天前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
18 1
|
26天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
41 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
26天前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!
|
1月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
|
2月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
63 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
81 2