`
tomp110
  • 浏览: 31808 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

CSS解决中英文混合字符串的截取省略问题

    博客分类:
  • Css
阅读更多
随着W3C的渐渐普及,许多网站都在进行着将传统表格转化为DIV+CSS的布局方式,我在研究CSS与DIV的一些特性时,发现了一个比较有趣的CSS,经过一系列的研究和实验以后,发现了一个使用DIV+CSS实现这一功能的另类方法,此方法在我所能测试均无问题,并且良好的兼容于各种编码及中英文混排的情况。 
在Div中的方法:

<DIV STYLE="width: 200px;  border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">  
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>  
<NOBR>就a是比如有一行文字,很长,表格内一行显示不下.</NOBR>  
<NOBR>就1是比如有一行文字,很长,表格内一行显示不下.</NOBR>  
<NOBR>就F是比如有一行文字,很长,表格内一行显示不下.</NOBR>  
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>  
</DIV>
在Table中的方法:
<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666> 
<TR> 
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD> 
</TR> 
</TABLE>
代码很简单,基本上应该很容易就可以看明白,主要在于“text-overflow”这个属性,此属性有2个值,分别是“ellipsis”和“clip”,简单的理解,第一个值会在截取之后在文字末端加上省略号,第二个值则不会。

转自http://yardan.blog.51cto.com/304821/83018
分享到:
评论

相关推荐

    截取指定长度的字符串

    "截取指定长度的字符串"这个主题涉及到的是如何从一个字符串中提取出特定长度的部分。这在处理用户输入、数据展示、信息提取等多个场景中都非常常见。接下来,我们将深入探讨这个知识点。 首先,让我们明确什么是...

    CSS截取字符串

    利用CSS截取字符串,更好的优化系统,节约资源,避免不必要的错误

    css截取字符串简单实例

    复制代码代码如下: &lt;... &lt;head&gt; &lt;... &lt;ul&gt; &lt;li&gt;css截取字符串 css截取字符串css截取字符串css截取字符串&lt;/li&gt; &lt;li&gt;css截取字符串 css截取字符串 css截取字符串 css截取字符串&lt;/li&gt; &lt;li&gt;css截

    485通讯中文工具js vbs 字符串截取 进制转换 按钮提交 div表格asp等

    - 在前端开发中,字符串处理是常见的操作,例如字符串截取、替换、匹配等。JavaScript提供了丰富的字符串方法,如`substring()`用于截取字符串,`replace()`用于替换特定子串,以及正则表达式(`/pattern/flags`)...

    关于中gridview 字符串截取的方法

    知识点详细说明如下: 1. GridView控件及列内容展示问题 在Web界面开发中,GridView是一...总结来说,通过前端CSS样式与后端代码相结合的方式,可以有效解决GridView中字符串过长的问题,使得数据展示更加美观且实用。

    IE11兼容性问题完美解决(用户代理字符串)

    同时,利用开发者工具(如IE11的F12开发者工具)进行实时调试也是解决问题的关键。 总之,解决IE11的兼容性问题需要多方面的策略和技巧。通过理解UA字符串的作用,调整浏览器设置,以及合理运用前端技术和工具,...

    css自动截取指定长度字符串,结尾显示... 支持FF浏览器

    本文将详细介绍如何利用CSS实现对指定长度的字符串进行自动截取并在末尾显示省略号(...),同时确保该方法能够良好地支持Firefox等主流浏览器。 #### 实现原理与代码示例 ##### 1. CSS属性介绍 为了实现文本的...

    解决Android原生TextView显示中英文等末尾参差不齐问题

    然而,当TextView显示中英文混合或包含特殊字符时,可能会出现末尾对齐不一致的问题,这会严重影响UI的美观性和用户体验。为了解决这个问题,我们需要深入理解TextView的工作原理,并采取适当的策略进行优化。 首先...

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

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

    CSS3截取字符串实例代码【推荐】

    通常,我们使用JavaScript或后端语言来截取字符串,但CSS3也提供了一种方法来实现这一功能。这种方法的优点在于,它可以在不涉及额外脚本的情况下,仅通过样式控制来实现文本的截取。接下来,我们将深入探讨如何使用...

    table中的超长字符串用省略号表示的css样式

    在CSS中实现文本溢出用省略号表示的方法主要有以下几个关键属性: 1. `white-space: nowrap;`:这个属性用于设置如何处理元素内的空白字符。`nowrap` 值的作用是防止文本换行,使得文本在单行内显示。 2. `...

    jQuery截取指定长度字符串代码

    本文将详细讲解如何使用jQuery截取指定长度的字符串,并分析相关的实现原理及代码注释。 标题所提到的"jQuery截取指定长度字符串代码"实际上是一个JavaScript插件方法,它扩展了jQuery的核心功能,允许开发者便捷地...

    json字符串转table字符串

    这个资源提供的功能就是解决这样的问题,它能够帮助开发者将动态获取的JSON字符串转换成类似Excel表格的字符串格式,便于在前端展示或者进行其他处理。 这个过程通常涉及以下步骤: 1. **解析JSON字符串**:首先,...

    CSS中英文双语导航菜单 div css实现中英文双语切换导航条.zip

    同时,CSS中的字符串(如类名)应避免使用特定语言的文字,以防止乱码或编码问题。 在实际项目中,可能会使用更高级的技术,如i18n(国际化)库,它们提供了更强大的多语言支持和维护便利性。然而,对于简单的需求...

    纯CSS3实现跳跃的3D字符串动画效果源码.zip

    在本资源中,我们关注的是一个使用纯CSS3技术实现的3D字符串动画效果。CSS3是 Cascading Style Sheets(层叠样式表)的第三版,它为网页设计师提供了更强大的样式控制和呈现能力,特别是在动画和3D转换方面。这个...

    gradientstring炫彩风格的字符串

    在"gradient-string炫彩风格的字符串"中,CSS主要用于设置字符串的基础样式以及配合JavaScript实现的渐变效果。例如: 1. **字体和排版**:通过`font-family`, `font-size`, `line-height`等属性定义文本的外观。 2...

    insert-css, 在 &lt;head&gt; 中插入一个css字符串.zip

    insert-css, 在 &lt;head&gt; 中插入一个css字符串 插入 css在 &lt;head&gt; 中插入一个css字符串 示例 var insertCss = require('insert-css'); var styleElement = insertCss('body

    css 省略号 css3让多余的字符串消失并附加省略号的实现代码

    在实际开发中,需要注意的是,文本省略处理只对单行文本有效,如果需要对多行文本进行省略处理,则需要采用不同的方法,如使用JavaScript等技术手段动态处理文本,或者使用CSS3的多行文本省略技术,但这通常需要特定...

Global site tag (gtag.js) - Google Analytics