`

溢出文字省略显示(非截取)

阅读更多

1.div中文字显示在一行,并将溢出的文字省略显示

    

<html>
<head>
<style type="text/css"> 
/*<![CDATA[*/ 
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
} 
/*]]>*/ 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
</body> 
</html> 

这样查出div的文字就会以省略的形式显示,并不是单独的截取。不满意还可以加个title鼠标放上显示

想要div以省略的形式显示的时候,只单独设定text-overflow:ellipsis;是没有效果的。因为它仅仅是注解,标注溢出时以省略的形式显示。所以必须要有white-space:nowrap,让文字显示子一行,又需要用overflow:hidden来使溢出的内容隐藏。

2.计算一个字符串的长度

因为每个浏览器计算字符串的长度的方法不一样,所以在使用省略显示的时候可能会造成在不同的浏览器中显示的效果不一样。所以想要知道一个字符串的长度,可以将它放到一个span标签,即<span>string1string2</span>.然后使用jquery中的width()方法就可以得到在不同的浏览器中该字符串的长度了,即$("span").width()。

 

借鉴此文:http://blog.csdn.net/wzy_3463/article/details/8315503

分享到:
评论

相关推荐

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

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

    js文字超出省略号特效

    "js文字超出省略号特效"就是一种利用JavaScript实现文本溢出时添加省略号的技术,它可以帮助我们在不改变HTML结构的前提下,优雅地处理长文本的显示。以下是关于这个主题的详细知识点: 1. **CSS基础**:首先,我们...

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

    在这个例子中,`.name` 是一个类名,可以应用到任何需要截取文字的元素上,比如用户的昵称。`line-height` 和 `text-align` 是为了调整行高和文本对齐方式,可以根据具体需求进行调整。 值得注意的是,`text-...

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

    总的来说,利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性,我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示,提高网页的性能和用户体验。同时,对于多行...

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

    当文本溢出其包含元素的范围时,通常会在溢出的元素后面出现省略号来表示还有更多内容未显示。这种效果常见于布局限制,如在列表、表格或特定宽度的容器中显示文字时。通过使用text-overflow属性,开发者可以控制...

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

    在实现文本溢出省略号功能时,我们通常将其设置为 `nowrap`,这将强制文本在同一行内显示,不允许换行。 ```css white-space: nowrap; ``` `overflow` 属性则用来处理元素内容超出其边框的情况。在这里,我们需要...

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    在本文中,我们将探讨如何使用JavaScript和CSS...通过本文的介绍,读者应该能够掌握如何使用CSS和JavaScript技术来实现文本溢出省略以及鼠标悬停显示完整文本的交互效果。这为网页布局提供了更好的灵活性和交互体验。

    jQuery实现控制文字内容溢出用省略号(…)表示的方法

    在jQuery的内容中,除了文本溢出显示省略号的技巧,还提到了一系列与jQuery相关的专题内容,比如《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》...

    CSS文字截取功能实现代码

    在这里,我们将其设置为 `ellipsis`,表示溢出时显示省略符号。 同时,我们还使用了 `-o-text-overflow` 属性来兼容 Opera 浏览器。`-o-text-overflow` 属性是 Opera 浏览器的私有属性,用于设置文字溢出时的显示...

    用css截取字符实现文字自动截断隐藏溢出文本

    在网页设计中,文字内容在容器中完整显示是一种基本需求,但有时我们希望在内容超出容器宽度时自动隐藏多余的文本,仅显示前一部分,并以省略号(…)代替被隐藏的内容,这就是文字自动截断隐藏溢出文本的功能。...

    微信小程序之canvas 文字断行和省略号显示

    文字的多行处理在dom元素中很好办。但是canvas中没有提供方法,只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法: wxml: ...canvas肯定要一个画板容器啦...//处理文字多出省略号显示 dealWords: fu

    css+js结合实现文本内容自适应页面大小截取显示

    "css+js结合实现文本内容自适应页面大小截取显示"这个主题主要探讨了如何利用CSS和JavaScript技术来动态调整文本的显示方式,以确保其在不同屏幕尺寸下都能保持整洁且易于阅读。以下将详细介绍这一技术的应用和实现...

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

    1. `width`: 设置容器的宽度,限制文字显示的范围。 2. `white-space: nowrap;`: 阻止文字换行,确保所有内容都在同一行内。 3. `text-overflow: ellipsis;`: 当内容超过容器宽度时,显示省略号。 4. `-o-text-...

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

    本文将详细介绍三种常见的CSS方法来截取字符并隐藏溢出的文本。 1. **使用`overflow`和`text-overflow`属性** 当你希望隐藏超出容器宽度的文本时,可以使用`overflow`属性配合`text-overflow`属性。`overflow`设置...

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

    组件提供了两种截取文字的方法:一是根据字符长度限制,二是根据容器的高度和行数来决定何时显示省略号。配置项包括: 1. `targetCls`:需要截取的容器的选择器,必填。 2. `limitLineNumber`:要显示的行数,默认1...

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

    `text-overflow`属性的`ellipsis`值会在文本溢出时显示省略号。需要注意的是,`text-overflow`单独使用无效,必须与`white-space: nowrap;`和`overflow: hidden;`一起使用,前者强制文本在同一行显示,后者隐藏超出...

    处理jsp显示文字过长问题的解决方法

    当字符串长度超过70个字符时,只显示前70个字符并添加省略号,否则显示完整内容。 ```jsp ${fn:length(schedule.content eq null?'无':schedule.content)&gt;70}"&gt; ${fn:substring(schedule.content eq null?'无':...

Global site tag (gtag.js) - Google Analytics