`
tomp110
  • 浏览: 31391 次
  • 性别: 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截取字符串简单实例

    复制代码代码如下: &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截

    jsp页面字符串截取,点击弹出弹出层

    在这个特定的场景中,"jsp页面字符串截取,点击弹出弹出层"是一个常见的交互需求,通常涉及到前端的JavaScript操作和后端的JSP处理。 首先,字符串截取是编程中的基本操作,无论是在Java还是JavaScript中。在JSP...

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

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

    strclass一个微小的库将CSS类作为字符串应用于对象

    `strclass` 是一个轻量级的JavaScript库,专为方便地将CSS类名作为字符串应用到DOM元素上而设计。这个库的核心功能是帮助开发者更高效、更简洁地管理DOM元素的样式类,尤其在处理动态变化的CSS类时,它能提供便利的...

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

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

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

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

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

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

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

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

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

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

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

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

    CSS:用overflow代替left截取指定长度字符串

    为了解决这个问题,开发者通常会采取两种策略:一种是通过CSS的`overflow`属性来隐藏超出部分;另一种是在服务器端使用字符串函数,如`left`,来截取标题的指定长度。这两种方法各有优缺点,下面我们将深入探讨。 ...

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

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

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

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

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

    css3中如何让多余的字符串消失并附加省略号的方法 可以使用 复制代码代码如下: white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;height:50px 让多余的内容隐藏并附加...

    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实现字符串截断并加省略号示例

    首先,我们要了解CSS中涉及这一功能的关键属性: 1. `width`: 定义元素的宽度。这是实现截断的前提,需要限制元素的宽度使其不足以容纳所有文本。 2. `white-space`: 控制元素内的空白字符处理。`nowrap` 属性可以...

Global site tag (gtag.js) - Google Analytics