语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
关于text-overflow属性如何应用,我们作如下的说明讲解:
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
我们首页建立了一个无序列表UL,里面有几个列表项LI,内部建立了列表链接A。我们的测试主要在LI在进行,请注意观察,看如下的三段代码:
一、仅定义text-overflow:ellipsis; 不能实现省略号效果
。
xml 代码
- <!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
>
- <
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
- <
title
>
52CSS
</
title
>
- <
style
type
=
"text/css"
>
- ul {width:300px; margin:50px auto;}
- li {width:300px; line-height:25px; text-overflow:ellipsis;}
- a {color:#03c; font-size:13px;}
- a:hover {color:#000;}
- </
style
>
- </
head
>
- <
body
>
- <
ul
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS实战精萃 - Pro CSS Techniques
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS实战:id是狙击枪 class是双刃剑 合则两利分则两败
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS布局实例:CSS标签切换代码实例教程
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
解决IE7以下版本不支持无A状态伪类的几种方法!
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS去除表格td默认间距及制作1px细线表格
</
a
>
- </
ul
>
- </
body
>
- </
html
>
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。
xml 代码
- <!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
>
- <
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
- <
title
>
52CSS
</
title
>
- <
style
type
=
"text/css"
>
- ul {width:300px; margin:50px auto;}
- li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}
- a {color:#03c; font-size:13px;}
- a:hover {color:#000;}
- </
style
>
- </
head
>
- <
body
>
- <
ul
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS实战精萃 - Pro CSS Techniques
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS实战:id是狙击枪 class是双刃剑 合则两利分则两败
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS布局实例:CSS标签切换代码实例教程
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
解决IE7以下版本不支持无A状态伪类的几种方法!
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS去除表格td默认间距及制作1px细线表格
</
a
>
- </
ul
>
- </
body
>
- </
html
>
三、按52css.com的教程,即本文所讲的方法,同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果:
xml 代码
- <!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
>
- <
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
- <
title
>
52CSS
</
title
>
- <
style
type
=
"text/css"
>
- ul {width:300px; margin:50px auto;}
- li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
- a {color:#03c; font-size:13px;}
- a:hover {color:#000;}
- </
style
>
- </
head
>
- <
body
>
- <
ul
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS实战精萃 - Pro CSS Techniques
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS实战:id是狙击枪 class是双刃剑 合则两利分则两败
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS布局实例:CSS标签切换代码实例教程
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
解决IE7以下版本不支持无A状态伪类的几种方法!
</
a
>
- <
li
>
<
a
href
=
"http://www.52css.com/"
>
CSS去除表格td默认间距及制作1px细线表格
</
a
>
- </
ul
>
- </
body
>
- </
html
>
-------------------------------------------------
/* 让溢出文本显示成省略号 */
.ctl {
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding:2px
}
分享到:
相关推荐
本文主要讲解如何实现一个兼容Internet Explorer(IE)和Firefox(FF)的单行溢出文本显示省略号的效果。这种方法可以让过长的文本在单行内显示,并在超出部分以省略号代替,从而提高用户体验。 首先,我们需要一个...
实现方法:效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。实现方法:效果如图:适用范围:该方法适用范围广,但文字未
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
多行文本溢出显示省略号
如果我们希望文本在一行内显示,并在超出时添加省略号,我们需要将 `white-space` 设置为 `nowrap`,阻止文本换行。 以下是一个简单的CSS示例: ```css .container { width: 200px; /* 容器宽度,可根据需要调整 ...
在实际应用中,"jQuery文字溢出显示省略号插件"能够与各种网页布局和设计无缝集成,无论是响应式设计还是固定宽度布局,都能提供良好的文本溢出处理效果。对于需要限制文本长度的场景,如新闻摘要、产品描述、评论...
网页文字溢出显示省略号是一个常见的需求,尤其是在有限的空间内展示大量文本时。jQuery的dotdotdot.js插件提供了一种优雅的解决方案,能够帮助开发者处理这种情况。这个插件适用于单行和多行文本,当内容超出指定...
datagrid添加tooltip及超出宽度添加省略号
引导省略号为溢出文本添加省略号的快速方法版本 1.0.0 这个插件基于 [dobiatowski] ( ) 的这个项目。 请参阅的性能演示。 ####Dependencies: [jQuery] ( ) 如果你想使用工具提示,那么也 [twitter-bootstrap] ( ) #...
在CSS中,文本溢出显示省略号是一种常见的文本处理方式,主要用来在有限的空间内隐藏超出的部分,通常用于文章摘要、评论等场景。这里我们将详细介绍如何使用CSS实现单行和多行文本溢出时显示省略号。 首先,我们来...
CSS 提供了一些技巧来处理文本溢出的情况,使我们能够优雅地显示单行或多行文本的省略号。以下是对"CSS实现单行、多行文本溢出显示省略号的实现方法"的详细说明: **单行溢出** 单行溢出的实现主要是通过限制文本...
本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性,还可以避免因文本溢出而造成用户界面的混乱。在CSS中,我们可以通过组合几个属性来实现这一效果,包括`white-space`、`...
今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现,不过相对比较繁琐,并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现,...
网页文字溢出显示省略号是一种常见的网页设计技巧,它能有效地管理长文本,使得页面在有限的空间内保持整洁和可读性。jQuery插件在这个过程中起到了关键的作用,通过JavaScript的强大功能来实现这一效果。本压缩包...
在实际应用中,为了实现溢出文本显示省略号的效果,除了需要使用text-overflow属性外,通常还需要配合使用overflow和white-space属性。overflow属性决定了当内容溢出其块级格式化上下文时如何处理,而white-space...
文本溢出显示省略字符,即在文本溢出时显示省略号(...),是常用的处理方式之一。本文将详细介绍两种实现这一效果的常用方法。 方法一:使用CSS实现文本溢出显示省略字符 这是通过纯CSS实现的方法,适用于单行文本...
总之,实现“判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号”的功能,需要结合CSS的溢出省略策略与JavaScript的动态交互处理。通过这样的方式,我们可以为用户提供更好的阅读体验,同时保持界面...
`clip` 值会简单地裁剪超出容器范围的文本,而 `ellipsis` 值则会在文本溢出时显示省略号(...)。 ```css text-overflow: clip; ``` 上述代码会裁剪超出容器的文本,不显示省略号。 ```css text-overflow: ...