使用CSS截取文字

截字是一个很恶心的问题。为了照顾表现上的需要，通常需要把过长的句子，比如一个列表中的新闻标题，截短。 通常这由程序员使用后台技术(各种流行的语言，PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术，因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中，用户可以更方便的掌握信息完整性。 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!
　　text-overflow是CSS3的一个属性(property)，它可以截短过长的字符串，并依据值(value)来决定被截掉部分使用何种方式展现。目前，IE已经实现对其的支持，Opera也有了私有属性(-o-text-overflow)对其支持，Firefox似乎落后一步……支持的两者都可使用ellipsis 值，把截掉部分替代成省略号(即ellipsis)。 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!
　　所以，你要做的只是，把需要截字的元素定好宽度，和overflow一起使用，即可实现效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
 
</style> 
</head>
<body> 
<div class="content">此处显示   class "content" 的内容</div> 
</body> 
</html>

截字是一个很恶心的问题。为了照顾表现上的需要，通常需要把过长的句子，比如一个列表中的新闻标题，截短。 通常这由程序员使用后台技术(各种流行的语言，PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术，因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中，用户可以更方便的掌握信息完整性。 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!
　　text-overflow是CSS3的一个属性(property)，它可以截短过长的字符串，并依据值(value)来决定被截掉部分使用何种方式展现。目前，IE已经实现对其的支持，Opera也有了私有属性(-o-text-overflow)对其支持，Firefox似乎落后一步&hellip;&hellip;支持的两者都可使用ellipsis 值，把截掉部分替代成省略号(即ellipsis)。 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!
　　所以，你要做的只是，把需要截字的元素定好宽度，和overflow一起使用，即可实现效果。
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt; 
&lt;title&gt;无标题文档&lt;/title&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
&lt;!-- 
.content { 
width:100px; 
border:red 1px solid; 
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis;/*以省略号替代截除部分*/ 
} 
--&gt; 
&lt;/style&gt; 
&lt;/head&gt;
&lt;body&gt; 
&lt;div class=&quot;content&quot;&gt;此处显示&nbsp;&nbsp; class &quot;content&quot; 的内容&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt;

最后修改：2010 年 02 月 16 日

支持就是力量

使用CSS截取文字

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

google map 离线地图操作方法

《小猪佩奇、粉红猪小妹、Peppa Pig》高清1080p 中英文原版下载

《Stanley博士的家》高智商游戏

彭丹邓家佳同性恋电影《除却巫山》介绍

设置WebBrowser的Referrer值

On the Way 在路上

交互式语音应答的挑战

25岁生日快乐

6月20日起汽油、柴油涨价啦

android webView 的 webSettings 最全的说明

使用CSS截取文字

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

使用CSS截取文字

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款