`
zengguo1988
  • 浏览: 280039 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

过长文本截取技术 text-overflow:ellipsis

    博客分类：
  • HTML
CSSWeb搜索引擎JSP 
阅读更多
Jsp代码 view plaincopy to clipboardprint?   
  1. ${fn:substring(str, 0, length)}      
  2. <c:if text="${fn:length(str) gt length}">...</c:if>     
  3. ${fn:substring(str, 0, length)}   
  4. <c:if text="${fn:length(str) gt length}">...</c:if>    
view plaincopy to clipboardprint?
${fn:substring(str, 0, length)}   
<c:if text="${fn:length(str) gt length}">...</c:if>  
${fn:substring(str, 0, length)}
<c:if text="${fn:length(str) gt length}">...</c:if>



上述代码的缺点：1、过于死板，字数大于length只显示length长度的字符串，导致如果是字母（字母比数字窄）被截取后显示更短，不美观；2、依赖于JSTL库；3、代码冗余度高；4、标题不完整，不便于搜索引擎搜索。

看看CSS带来的神奇效果，佩服没话说，代码：

Html代码
  1. view plaincopy to clipboardprint?   
  2. <div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">     
  3. <nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>     
  4. <nobr>这是不该换行的文本,这是一行不该换行的文本 ,这是文本行的结尾。</nobr>     
  5. </div>     
  6. <div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">  
  7. <nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>  
  8. <nobr>这是不该换行的文本,这是一行不该换行的文本 ,这是文本行的结尾。</nobr>  
  9. </div>    
view plaincopy to clipboardprint?
<div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">  
<nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>  
<nobr>这是不该换行的文本,这是一行不该换行的文本 ,这是文本行的结尾。</nobr>  
</div>  
<div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>
<nobr>这是不该换行的文本,这是一行不该换行的文本 ,这是文本行的结尾。</nobr>
</div>



解释：<nobr></nobr>标签与<br/>标签对立，表示不换行，这里最强的是text-overflow:ellipsis；来看一CSS中对这一属性的解释：

语法：
　　text-overflow : clip | ellipsis

　　参数：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

　　说明：
　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
　　最大的缺点：text-overflow:ellipsis属性在FF中是没有效果的。


使用时注意以下几点：（以下文章来自：http://www.mb5u.com/divcssjiaocheng/14015.html）

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。

Html代码
  1. view plaincopy to clipboardprint?   
  2. <mce:style type="text/css"><!--      
  3. ul {width:300px; margin:50px auto;}      
  4. li {width:300px; line-height:25px; text-overflow:ellipsis;}      
  5. a {color:#03c; font-size:13px;}      
  6. a:hover {color:#000;}      
  7. --></mce:style><style type="text/css" mce_bogus="1">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;}</style>     
  11. <ul>     
  12. <li>CSS实战精萃 - Pro CSS Techniques       
  13. <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败      
  14. <li>CSS布局实例：CSS标签切换代码实例教程      
  15. <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离      
  16. <li>解决IE7以下版本不支持无A状态伪类的几种方法！      
  17. <li>CSS去除表格td默认间距及制作1px细线表格        
  18. </ul>     
  19. <mce:style type="text/css"><!--   
  20. ul {width:300px; margin:50px auto;}   
  21. li {width:300px; line-height:25px; text-overflow:ellipsis;}   
  22. a {color:#03c; font-size:13px;}   
  23. a:hover {color:#000;}   
  24. --></mce:style><style type="text/css" mce_bogus="1">ul {width:300px; margin:50px auto;}   
  25. li {width:300px; line-height:25px; text-overflow:ellipsis;}   
  26. a {color:#03c; font-size:13px;}   
  27. a:hover {color:#000;}</style>  
  28. <ul>  
  29. <li>CSS实战精萃 - Pro CSS Techniques   
  30. <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败   
  31. <li>CSS布局实例：CSS标签切换代码实例教程   
  32. <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离   
  33. <li>解决IE7以下版本不支持无A状态伪类的几种方法！   
  34. <li>CSS去除表格td默认间距及制作1px细线表格     
  35. </ul>    
view plaincopy to clipboardprint?
<mce: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;}   
--></mce:style><style type="text/css" mce_bogus="1">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>  
<ul>  
<li>CSS实战精萃 - Pro CSS Techniques    
<li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败   
<li>CSS布局实例：CSS标签切换代码实例教程   
<li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离   
<li>解决IE7以下版本不支持无A状态伪类的几种方法！   
<li>CSS去除表格td默认间距及制作1px细线表格     
</ul>  
<mce: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;}
--></mce:style><style type="text/css" mce_bogus="1">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>
<ul>
<li>CSS实战精萃 - Pro CSS Techniques 
<li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败
<li>CSS布局实例：CSS标签切换代码实例教程
<li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离
<li>解决IE7以下版本不支持无A状态伪类的几种方法！
<li>CSS去除表格td默认间距及制作1px细线表格  
</ul>


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

Html代码
  1. view plaincopy to clipboardprint?   
  2. <mce:style type="text/css"><!--      
  3. ul {width:300px; margin:50px auto;}      
  4. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}      
  5. a {color:#03c; font-size:13px;}      
  6. a:hover {color:#000;}      
  7. --></mce:style><style type="text/css" mce_bogus="1">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;}</style>      
  11. <ul>      
  12. <li>CSS实战精萃 - Pro CSS Techniques       
  13. <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败      
  14. <li>CSS布局实例：CSS标签切换代码实例教程      
  15. <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离      
  16. <li>解决IE7以下版本不支持无A状态伪类的几种方法！      
  17. <li>CSS去除表格td默认间距及制作1px细线表格        
  18. </ul>     
  19. <mce:style type="text/css"><!--   
  20. ul {width:300px; margin:50px auto;}   
  21. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}   
  22. a {color:#03c; font-size:13px;}   
  23. a:hover {color:#000;}   
  24. --></mce:style><style type="text/css" mce_bogus="1">ul {width:300px; margin:50px auto;}   
  25. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}   
  26. a {color:#03c; font-size:13px;}   
  27. a:hover {color:#000;}</style>  
  28. <ul>  
  29. <li>CSS实战精萃 - Pro CSS Techniques   
  30. <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败   
  31. <li>CSS布局实例：CSS标签切换代码实例教程   
  32. <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离   
  33. <li>解决IE7以下版本不支持无A状态伪类的几种方法！   
  34. <li>CSS去除表格td默认间距及制作1px细线表格     
  35. </ul>    
view plaincopy to clipboardprint?
<mce: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;}   
--></mce:style><style type="text/css" mce_bogus="1">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>   
<ul>   
<li>CSS实战精萃 - Pro CSS Techniques    
<li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败   
<li>CSS布局实例：CSS标签切换代码实例教程   
<li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离   
<li>解决IE7以下版本不支持无A状态伪类的几种方法！   
<li>CSS去除表格td默认间距及制作1px细线表格     
</ul>  
<mce: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;}
--></mce:style><style type="text/css" mce_bogus="1">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>
<ul>
<li>CSS实战精萃 - Pro CSS Techniques 
<li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败
<li>CSS布局实例：CSS标签切换代码实例教程
<li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离
<li>解决IE7以下版本不支持无A状态伪类的几种方法！
<li>CSS去除表格td默认间距及制作1px细线表格  
</ul>



三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：

Html代码
  1. view plaincopy to clipboardprint?   
  2. <mce:style type="text/css"><!--      
  3. ul {width:300px; margin:50px auto;}      
  4. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}      
  5. a {color:#03c; font-size:13px;}      
  6. a:hover {color:#000;}      
  7. --></mce:style><style type="text/css" mce_bogus="1">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;}</style>     
  11. <ul>     
  12. <li>CSS实战精萃 - Pro CSS Techniques       
  13. <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败      
  14. <li>CSS布局实例：CSS标签切换代码实例教程      
  15. <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离      
  16. <li>解决IE7以下版本不支持无A状态伪类的几种方法！      
  17. <li>CSS去除表格td默认间距及制作1px细线表格        
  18. </ul>     
  19. <mce:style type="text/css"><!--   
  20. ul {width:300px; margin:50px auto;}   
  21. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}   
  22. a {color:#03c; font-size:13px;}   
  23. a:hover {color:#000;}   
  24. --></mce:style><style type="text/css" mce_bogus="1">ul {width:300px; margin:50px auto;}   
  25. li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}   
  26. a {color:#03c; font-size:13px;}   
  27. a:hover {color:#000;}</style>  
  28. <ul>  
  29. <li>CSS实战精萃 - Pro CSS Techniques   
  30. <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败   
  31. <li>CSS布局实例：CSS标签切换代码实例教程   
  32. <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离   
  33. <li>解决IE7以下版本不支持无A状态伪类的几种方法！   
  34. <li>CSS去除表格td默认间距及制作1px细线表格     
  35. </ul>    
view plaincopy to clipboardprint?
<mce: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;}   
--></mce:style><style type="text/css" mce_bogus="1">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>  
<ul>  
<li>CSS实战精萃 - Pro CSS Techniques    
<li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败   
<li>CSS布局实例：CSS标签切换代码实例教程   
<li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离   
<li>解决IE7以下版本不支持无A状态伪类的几种方法！   
<li>CSS去除表格td默认间距及制作1px细线表格     
</ul>  
<mce: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;}
--></mce:style><style type="text/css" mce_bogus="1">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>
<ul>
<li>CSS实战精萃 - Pro CSS Techniques 
<li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败
<li>CSS布局实例：CSS标签切换代码实例教程
<li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离
<li>解决IE7以下版本不支持无A状态伪类的几种方法！
<li>CSS去除表格td默认间距及制作1px细线表格  
</ul>



请您非凡注重，text-overflow:ellipsis属性在FF中是没有效果的。（Y_Y）

 

 

个人博客正式上线，欢迎访问

分享到：
| 用Ant实现Java项目的自动构建和部署（4）
评论
发表评论

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

相关推荐

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

    听说用css的 text-overflow: ellipsis 也可以实现，于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap （限制不换行） 和 overflow 属性为 hidden （隐藏溢出...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).docx

    这种方法适用于单行文本，如果有多行文本，`text-overflow: ellipsis;`不会生效。 2. **使用`white-space: nowrap`** 如果你希望文本在同一行内显示，直到遇到` `标签，可以使用`white-space: nowrap;`属性。这...

    jquery 截取长文本和css

    &lt;TITLE&gt;JQUERY 文本截取方法&lt;/TITLE&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;script type="text/javascript" src="jquery-1.3.2.js"&gt; &lt;script type="text/javascript"&gt; $.fn....

    用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf

    本文将详细介绍两种常见的CSS方法来实现文本截取。 **方法一：使用`overflow`、`text-overflow`和`white-space`** 这种方法适用于需要在固定宽度内展示任意HTML元素的情况，包括超链接和图片。下面的代码示例展示...

    Html内容超出标记宽度后自动隐藏

    `text-overflow: ellipsis`会在文本溢出时显示一个省略号，表示还有未显示的内容。但需要注意的是，这个属性只对块级元素和设置了`white-space: nowrap`的内联元素生效。 为了更好地应用这些样式，我们可以创建一个...

    javascript超过容器后显示省略号效果的方法(兼容一行或者多行)_.docx

    // 根据配置进行文本截取处理 $(cfg.targetCls).each(function(index, element) { self._handleTextOverflow(element, cfg); }); }, // 处理文本溢出 _handleTextOverflow: function(element, cfg) { // .....

    JSP中的点点样式

    在网页设计中，我们常常会遇到一些情况，比如评论、简介或文章摘要等，由于空间限制，需要将过长的文本进行截断，同时告知用户还有未展示的部分。此时，“点点样式”就显得尤为重要。 1. **文本截断的基本原理** ...

    css3进行截取替代js的substring

    在前端开发中，文本截取是一项常见的需求，用于在有限的空间内展示文本的精华部分。在CSS3出现之前，开发者通常依赖JavaScript的`substring`、`slice`等方法来实现文本截取。然而，随着CSS3的发展，我们有了新的选择...

    CSS 超出隐藏实现限制字数的功能代码(多浏览器)

    在网页设计中，为了优化用户体验和搜索引擎的抓取，有时候我们需要限制标题或其他文本内容的显示字数，以避免内容过长影响布局。CSS（层叠样式表）提供了一种有效的解决方案，即“超出隐藏”技术，它能实现文本超出...

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

    这个标签能够强制内容不换行，即使文本很长，也会在一行内显示，配合CSS的text-overflow属性，可以更好地控制文本溢出时的显示效果。但需要注意的是，标签并非标准的HTML标签，它是一个自定义标签，主要用于旧版的...

    字符串过长CSS截取多余文字并用省略号显示

    在网页设计中，有时我们需要对过长的字符串进行截取，并在结尾处添加省略号以保持布局的整洁和美观。CSS（Cascading Style Sheets）提供了一种优雅的方式来实现这个功能，尤其对于动态生成的内容，如用户昵称或者...

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

    在网页设计中，有时我们需要对文本内容进行限制，防止过长的文本破坏页面布局或超出预设的容器宽度。CSS 提供了一种解决方案，即通过 `text-overflow` 属性来实现文本溢出时显示省略标记的功能。本文将详细探讨如何...

    网页中字段太长，省略号表示。css显示

    在网页设计中，有时我们需要处理过长的文本字段，使其在有限的空间内显示部分内容并以省略号（...）结尾，以保持页面整洁且易于阅读。这种效果可以通过CSS（层叠样式表）来轻松实现。本文将深入探讨如何使用CSS实现...

    CSS(js)限制页面显示的文本字符长度.docx

    例如，我们可以创建一个类，如`.limited-text`，然后设定其`overflow`为`hidden`，`white-space`为`nowrap`，并设置`text-overflow: ellipsis;`。这样，当文本内容超过容器宽度时，超出部分将以省略号形式显示。但是...

    字太多用...代替的方法（两种）

    在编程和网页设计中，有时候我们需要处理文本内容过长的情况，这时可以采用“...”来代替过多的文字，以保持界面的整洁和可读性。本文将详细介绍两种实现这一功能的方法，一种是使用JavaScript的jQuery库，另一种是...

    纯CSS实现多行文字截断的示例代码

    首先，我们通常使用的单行文本截断是通过`text-overflow: ellipsis`属性来实现的。这个属性配合`white-space: nowrap`和`overflow: hidden`可以很好地在单行文本超出容器宽度时显示省略号。例如： ```css div { ...

    vue 实现超长文本截取,悬浮框提示

    本篇文章将介绍如何在Vue中实现超长文本截取，并通过悬浮框提示完整内容，尤其在表格环境中。 首先，为了实现文本的截取，我们可以使用CSS样式来控制文本的溢出行为。在描述中给出的CSS代码片段展示了如何实现这个...

    用css截取字符的几种方法详解（css排版隐藏溢出文本）

    CSS提供了多种方法来实现文本截取，包括隐藏溢出文本。 1. 隐藏溢出文本的基本方法是设置容器的`overflow`属性为`hidden`，这样超出容器宽度的文本将不会显示。然而，这种方法虽然简单，但不会提供任何视觉上的提示...

    HTML长文本截取含有HTML代码同样适用的两种方法

    本文将介绍两种适用于含有HTML代码的长文本截取方法，分别是使用CSS和JavaScript（jQuery）。 首先，我们来看第一种方法：使用CSS截断字符串。这种方法适用于大多数现代浏览器，包括IE、Firefox、Opera和Safari。...

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