`
Clayz
  • 浏览: 298543 次
  • 性别: Icon_minigender_1
  • 来自: 东京
社区版块
存档分类
最新评论

溢出文本显示省略号

CSSXHTMLHTMLWeb搜索引擎 
阅读更多

语法： 
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 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312"   />   
  5. < title > 52CSS </ title >   
  6. < style   type = "text/css" >   
  7. ul {width:300px; margin:50px auto;}  
  8. li {width:300px; line-height:25px; text-overflow:ellipsis;}  
  9. a {color:#03c; font-size:13px;}  
  10. a:hover {color:#000;}  
  11. </ style >   
  12. </ head >   
  13. < body >   
  14. < ul >   
  15. < li > < a   href = "http://www.52css.com/" > CSS实战精萃 - Pro CSS Techniques  </ a >   
  16. < li > < a   href = "http://www.52css.com/" > CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败 </ a >   
  17. < li > < a   href = "http://www.52css.com/" > CSS布局实例：CSS标签切换代码实例教程 </ a >   
  18. < li > < a   href = "http://www.52css.com/" > Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离 </ a >   
  19. < li > < a   href = "http://www.52css.com/" > 解决IE7以下版本不支持无A状态伪类的几种方法！ </ a >   
  20. < li > < a   href = "http://www.52css.com/" > CSS去除表格td默认间距及制作1px细线表格   </ a >   
  21. </ ul >   
  22. </ body >   
  23. </ html >   


二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312"   />   
  5. < title > 52CSS </ title >   
  6. < style   type = "text/css" >   
  7. ul {width:300px; margin:50px auto;}  
  8. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}  
  9. a {color:#03c; font-size:13px;}  
  10. a:hover {color:#000;}  
  11. </ style >   
  12. </ head >   
  13. < body >   
  14. < ul >   
  15. < li > < a   href = "http://www.52css.com/" > CSS实战精萃 - Pro CSS Techniques  </ a >   
  16. < li > < a   href = "http://www.52css.com/" > CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败 </ a >   
  17. < li > < a   href = "http://www.52css.com/" > CSS布局实例：CSS标签切换代码实例教程 </ a >   
  18. < li > < a   href = "http://www.52css.com/" > Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离 </ a >   
  19. < li > < a   href = "http://www.52css.com/" > 解决IE7以下版本不支持无A状态伪类的几种方法！ </ a >   
  20. < li > < a   href = "http://www.52css.com/" > CSS去除表格td默认间距及制作1px细线表格   </ a >   
  21. </ ul >   
  22. </ body >   
  23. </ html >   

　　三、按52css.com的教程，即本文所讲的方法，同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：
xml 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312"   />   
  5. < title > 52CSS </ title >   
  6. < style   type = "text/css" >   
  7. ul {width:300px; margin:50px auto;}  
  8. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}  
  9. a {color:#03c; font-size:13px;}  
  10. a:hover {color:#000;}  
  11. </ style >   
  12. </ head >   
  13. < body >   
  14. < ul >   
  15. < li > < a   href = "http://www.52css.com/" > CSS实战精萃 - Pro CSS Techniques  </ a >   
  16. < li > < a   href = "http://www.52css.com/" > CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败 </ a >   
  17. < li > < a   href = "http://www.52css.com/" > CSS布局实例：CSS标签切换代码实例教程 </ a >   
  18. < li > < a   href = "http://www.52css.com/" > Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离 </ a >   
  19. < li > < a   href = "http://www.52css.com/" > 解决IE7以下版本不支持无A状态伪类的几种方法！ </ a >   
  20. < li > < a   href = "http://www.52css.com/" > CSS去除表格td默认间距及制作1px细线表格   </ a >   
  21. </ ul >   
  22. </ body >   
  23. </ html >   

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 

/* 让溢出文本显示成省略号 */
.ctl {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
    padding:2px
}

分享到：
| struts+hibernate分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    兼容IE和FF的单行溢出文本显示省略号

    本文主要讲解如何实现一个兼容Internet Explorer（IE）和Firefox（FF）的单行溢出文本显示省略号的效果。这种方法可以让过长的文本在单行内显示，并在超出部分以省略号代替，从而提高用户体验。 首先，我们需要一个...

    BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1

    实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未

    CSS实现单行、多行文本溢出显示省略号（…）

    CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看

    多行文本溢出显示省略号

    多行文本溢出显示省略号

    文本溢出时显示省略标记

    如果我们希望文本在一行内显示，并在超出时添加省略号，我们需要将 `white-space` 设置为 `nowrap`，阻止文本换行。 以下是一个简单的CSS示例： ```css .container { width: 200px; /* 容器宽度，可根据需要调整 ...

    jQuery文字溢出显示省略号插件.zip

    在实际应用中，"jQuery文字溢出显示省略号插件"能够与各种网页布局和设计无缝集成，无论是响应式设计还是固定宽度布局，都能提供良好的文本溢出处理效果。对于需要限制文本长度的场景，如新闻摘要、产品描述、评论...

    网页文字溢出显示省略号jQuery插件代码

    网页文字溢出显示省略号是一个常见的需求，尤其是在有限的空间内展示大量文本时。jQuery的dotdotdot.js插件提供了一种优雅的解决方案，能够帮助开发者处理这种情况。这个插件适用于单行和多行文本，当内容超出指定...

    easyui datagrid tip 超出宽度省略

    datagrid添加tooltip及超出宽度添加省略号

    bootstrap-ellipsis:为溢出文本添加省略号的快速方法

    引导省略号为溢出文本添加省略号的快速方法版本 1.0.0 这个插件基于 [dobiatowski] ( ) 的这个项目。 请参阅的性能演示。 ####Dependencies: [jQuery] ( ) 如果你想使用工具提示，那么也 [twitter-bootstrap] ( ) ＃...

    CSS实现单行、多行文本溢出显示省略号的实现方法.pdf

    在CSS中，文本溢出显示省略号是一种常见的文本处理方式，主要用来在有限的空间内隐藏超出的部分，通常用于文章摘要、评论等场景。这里我们将详细介绍如何使用CSS实现单行和多行文本溢出时显示省略号。 首先，我们来...

    CSS实现单行、多行文本溢出显示省略号的实现方法.docx

    CSS 提供了一些技巧来处理文本溢出的情况，使我们能够优雅地显示单行或多行文本的省略号。以下是对"CSS实现单行、多行文本溢出显示省略号的实现方法"的详细说明： **单行溢出** 单行溢出的实现主要是通过限制文本...

    css实现文本溢出显示省略号

    本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性，还可以避免因文本溢出而造成用户界面的混乱。在CSS中，我们可以通过组合几个属性来实现这一效果，包括`white-space`、`...

    使用text-overflow:ellipsis实现溢出文本省略号显示无需js

    今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现，...

    网页文字溢出显示省略号jQuery插件代码.zip

    网页文字溢出显示省略号是一种常见的网页设计技巧，它能有效地管理长文本，使得页面在有限的空间内保持整洁和可读性。jQuery插件在这个过程中起到了关键的作用，通过JavaScript的强大功能来实现这一效果。本压缩包...

    CSS省略号text-overflow超出溢出显示省略号

    在实际应用中，为了实现溢出文本显示省略号的效果，除了需要使用text-overflow属性外，通常还需要配合使用overflow和white-space属性。overflow属性决定了当内容溢出其块级格式化上下文时如何处理，而white-space...

    html文本溢出显示省略字符的两种常用解决方法

    文本溢出显示省略字符，即在文本溢出时显示省略号（...），是常用的处理方式之一。本文将详细介绍两种实现这一效果的常用方法。 方法一：使用CSS实现文本溢出显示省略字符 这是通过纯CSS实现的方法，适用于单行文本...

    CSS实现限制字数功能当对象内文本溢出时显示省略标记

    `clip` 值会简单地裁剪超出容器范围的文本，而 `ellipsis` 值则会在文本溢出时显示省略号（...）。 ```css text-overflow: clip; ``` 上述代码会裁剪超出容器的文本，不显示省略号。 ```css text-overflow: ...

    QTableWidget Item文本显示不全(文本溢出)

    QTableWidget item文本显示不全的通过气泡提示出来，如果item内容是完全显示的则气泡不会出现。只有显示不全时气泡才会出现。效果图：https://blog.csdn.net/qq_41622002/article/details/111224339

Magicbox
Global site tag (gtag.js) - Google Analytics