- 浏览: 329338 次
- 性别:
- 来自: 上海
文章分类
最新评论
语法:text-overflow : clip | ellipsis
取值:
clip :默认值 。不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里 .
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...
这样写:例如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;/* 不换行 */} </style> </head> <body> <div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div> </body> </html>
注意:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
如果容器是table,当文字内容过多时,不换行,而是出现...
这样写:例如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> table{table-layout:fixed;width:106px;} td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;/* 不换行 */} </style> </head> <body> <table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body> </html>
注意:
1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。
其它的要点和上面一样
text-overflow 的兼容性:
测过ie6,ie7,ff3,safari,opera,chorme,只有ff3和opera不兼容
另一种写法,比较怪。
切张省略号的图片dot.jpg作为li的背景图,背景图在li容器的右上角,并让子元素span相对于父元素div绝对定位,并把span的背景设置成背景色,宽度要大于或者等于省略号图片的宽度。
如果内容没有溢出,span刚好盖在li的背景图片上,这样就看不到省略号。
如果内容溢出,因为span绝对定位到div的右下角,所有span盖不住li的背景图,背景图在第一行的最右边,而span跑到了li的最后一行的最右边,因而我们能够看到省略号。
缺点:对于连续的英文字母和阿拉伯数字不起作用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无hack无js全兼容text-overflow:ellipsis效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style> * { margin:0; padding:0;} body { background:#fff;} .list ul { font-size:12px; font-family:simsun; text-align:left; line-height:18px;} .list a { color:#000; text-decoration:none; word-break:break-all;} .list div { position:relative; zoom:1; padding-left:1em; ) no-repeat 3px 6px;} .list span { position:absolute; right:-10px; bottom:0; height:18px; width:10px; background:#fff; overflow:hidden;} .list li { position:relative; width:11em; background:url(dot.gif) right top no-repeat; height:18px; overflow:hidden; padding-right:10px; zoom:1;} .list a:hover { color:#f60;} </style> <body> <div class="list"> <ul> <li> <div> <a href="#">该标签中字符超过十个了</a> <span></span> </div> </li> <li> <div> <a href="#">只有六个汉字</a> <span></span> </div> </li> <li> <div> <a href="#">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了</a> <span></span> </div> </li> <li> <div> <a href="#">blueidea blueidea blueidea</a> <span></span> </div> </li> </ul> </div> </body> </html>
- demo.zip (1.9 KB)
- 下载次数: 46
评论
阳光暖暖 写道您好,看到这篇文章,用了一下,虽然在火狐下面字体也截断了,不过却把一个字劈成了两半,请问有什么解决方法吗?我今天找了很多方法也没有找到。这个用css没啥好的处理办法,可以用js去截,或者后台程序截。
谢谢你的回答啊!以前是后台程序截取的。因为考虑到中英文的显示问题,才想着用css自带的属性解决。嗯,会好好看看其他的实现方法的。谢谢了!
您好,看到这篇文章,用了一下,虽然在火狐下面字体也截断了,不过却把一个字劈成了两半,请问有什么解决方法吗?我今天找了很多方法也没有找到。
这个用css没啥好的处理办法,可以用js去截,或者后台程序截。
不兼容ff3 不是w3c标准这两条就难以让人接受啊
毕竟目前大多数浏览器都还是支持的呀,期待有天ff3支持,那它被收录到w3c标准里就不远了
发表评论
-
IE各版本的css hack
2012-12-06 14:34 1420一:IE各版本的css hack HACK EX ... -
如何去掉链接虚线框
2011-10-08 13:58 1715链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用 ... -
chrome浏览器font-size<12px无效解决办法
2010-11-30 15:08 3660当样式表里font-size<12px时,chrome浏 ... -
IE下li内元素浮动产生边距的解决办法
2010-07-16 14:25 2635类似于这样的一个结构 <ul> &l ... -
css命名规范
2009-11-07 21:40 1732最近看到了些关于css命名方面的文章,对于这方面我也有自己的看 ... -
图片和文字的对齐
2009-11-07 15:50 10342最近工作中遇到些关于“图片和文字的对齐”的问题: ... -
img标签下多余空白bug解决方法
2009-06-25 13:56 2267根据原因的不同要用不 ... -
命名规则有利于SEO
2009-05-11 13:21 1303搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很 ... -
页面输出时一些常用的小技巧(一)
2009-04-07 23:43 2200页面输出时一些常用的小技巧(二) 1. 菜单一 ... -
button按钮在 IE 中两边被拉伸的解决办法
2009-03-07 18:40 1825大家在写按钮(input (type="button ... -
用div+css模拟表格对角线
2009-02-09 10:59 2202在蓝色理想 上看到一篇用css写的对角线,觉得很有用。 把 ... -
IE6下兼容position:fixed的问题
2009-01-15 17:23 3494做网页时经常会有让某 ... -
[译文]On having layout
2008-12-30 20:44 1992介绍 Internet Explorer 中有很多奇怪的渲染 ... -
css实现垂直居中
2008-12-15 13:53 1438如果是用table写的表格,那么用vertical-align ... -
是时候不用考虑基于字体大小(em)的设计了
2008-11-01 00:22 1694一篇不错的文章,转自 ... -
网页的栅格系统设计
2008-10-30 21:31 1345栅格系统的形成 1692年,新登基的法国国王路易十四 ... -
CSS滤镜
2008-10-24 14:44 1257下面是一些滤镜的描述, ... -
网站灰黑色CSS滤镜代码
2008-10-24 10:32 1802html { filter:progid:DXImageTra ... -
IE6默认不缓存背景图片,引起鼠标抖动的解决方法
2008-10-09 13:51 3794在IE6下,如果拖动的DOM元素使用了背景图,在Drag的过程 ... -
ink和@import引用css文件方法的区别
2008-09-17 18:11 3317<link> 元素所参考的样式用户可以自由的选择 ...
相关推荐
在实现文本溢出省略号功能时,我们通常将其设置为 `nowrap`,这将强制文本在同一行内显示,不允许换行。 ```css white-space: nowrap; ``` `overflow` 属性则用来处理元素内容超出其边框的情况。在这里,我们需要...
- **ellipsis**:当内容被修剪时,显示省略标记(...)。通常与`overflow:hidden`和`white-space:nowrap`一起使用。 - **clip**:当内容被修剪时,不显示任何东西。默认值。 ##### 2. `overflow` 属性 `overflow`...
ellipsis代表当对象内文本溢出时显示省略标记(…) 需要注意的是,要想这两个属性起真正的作用,需要配合overflow:hidden;white-space:nowrap;使用。 overflow:hidden;代表着超出文本的部分不显示 white-space:...
越界省略号 复制代码代码如下: .text-overflow { .../* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/ } 自动换行: 复制代码代码如下: word-break:break-all;/* 不换行 */ white-sp
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
text-overflow属性可以设置为ellipsis,该属性将在对象内文本溢出时显示省略标记(...)。同时,我们还需要使用white-space属性将文本限制在一行内显示所有文本。white-space属性可以设置为nowrap,以便文本不换行。...
/* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。 */ } ``` 在实际开发中,由于浏览器兼容性问题,不同浏览器可能对`text-overflow: ellipsis;`的支持程度不同。在非IE浏览器中,当文本...
当一行文字超过div宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行显示那要怎么办呢? 我想大家首先想到的办法就是用截断文字加“…”的做法。... /* 当对象内文本溢出时显示省略标记(…) ;需与o
设置或检索是否使用一个省略标记(…)标示对象...text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(w
`**:此属性用于指定当内容被裁剪时是否显示省略标记(...)。设置为`ellipsis`表示内容被裁剪时显示省略号。 5. **`-o-text-overflow:ellipsis;`**:这是一个Opera浏览器专用的前缀属性,作用与`text-overflow`相同...
- `text-overflow`: 此属性定义当文本溢出包含元素时如何显示省略标记(即省略号)。有效值包括 `clip`(修剪文本),`ellipsis`(显示省略号来代表被修剪的文本),和 `string`(使用给定的字符串来代表被修剪的...
而ellipsis则会在文本溢出时显示省略标记,这样用户就知道还有更多内容存在。white-space属性控制元素内空白符的处理方式,normal值会忽略空白符,pre值会保留空白符,而nowrap值则会让文本不换行,一直显示在同一行...
clip是默认值,表示溢出文本将被简单地裁切掉,而ellipsis会在文本溢出时显示省略标记(…)。这个属性通常与white-space: nowrap一起使用,以便在没有换行机会时,如果内容超出容器宽度,文本将以省略标记结束。 第...
而ellipsis参数值则用于当对象内文本溢出时,在内容末尾显示省略标记,如省略号(…),从而提示用户还有更多的内容未显示出来。 在实际应用中,为了实现溢出文本显示省略号的效果,除了需要使用text-overflow属性...
`,这将告诉浏览器在内容超出宽度时显示省略号。 ```css .xx { text-overflow: ellipsis; } ``` 组合以上代码,完整的CSS样式如下: ```css .xx { display: block; width: 200px; /* 自定义宽度 */ ...
CSS中text-overflow属性用于处理文本溢出元素框边界时的显示情况。当文本长度超过了元素所能容纳的范围,我们可以决定如何显示溢出的部分。一般情况下,浏览器默认的处理方式是将文本截断,也就是直接切断超出部分,...