CSS控制字符长度和显示长度

ikeycn

浏览: 146242 次
性别:
来自: 杭州

最近访客更多访客>>

wkydan

ilok

wxh512

ljwkevin

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (47)

社区版块

存档分类

CSS IE 电子商务 Opera 浏览器

CSS控制字符长度和显示长度
文章来源：http://hi.baidu.com/%BE%C5%D4%C2%B7%E3%C1%D6%B5%C4%BF%D5%BC%E4/blog/item/16f9fd4eda8ce1c1d0c86af7.html
在网页设计中，会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS 的代码控制来实现文本截取的方法。与程序员的直接字符截取的方式有点区别，其优势是可以自动控制文本显示的长度；缺点是不同浏览器的兼容性并不完美。使用到 overflow，text-overflow，white-space 这三个主要的属性，其他的代码属于修饰作用。

    CSS代码：
    <style>
    .texthidden{
     width:200px;
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
     border:1px solid #ddd;}
    </style>

    HTML代码：
    <div class="texthidden">
    CSS让容器的溢出部分内容隐藏起来
    </div>

代码分析：
1. width:200px; //指定宽度：
2. overflow:hidden; //将超出内容隐藏
3. text-overflow:ellipsis; //IE专用属性，文本溢出时显示省略标记()；其他浏览器不支持。
4. white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本，直到文本结束或者遭遇 br 元素

目前使用这种方法比较成功的示例是Gmail的内容显示，在IE下达到最好的效果。如果是FF那就比较糟糕，总是会出现截取半个中文的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效，目前很多CSS属性也存在这个问题，特别重要的是Margin和Padding这两个属性，往往导致页面出现各种不同的效果；在页面设计的时候，需要注意这些属性在不同浏览器的显示效果。

***********************************************************************************************************************************
CSS截取固定长度字符（支持 IE,FF,Opera）

最简单为IE

<div style="width:100px; overflow:hidden; text-overflow:ellipsis">bbbbbbbbbbbaaa888899999aaaaa</div>

这个是比较强悍的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="description" content="css文字截取,w3c" />
<title>css文字截取</title>
<style type="text/css">
<!--
body{
     margin:50px auto 0 auto;
     padding: 0;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     text-decoration: none;
}
a {text-decoration: none;color: #d90000;}
ul {width: 300px; padding:10px 15px 10px 25px;border: 1px solid #ccc;background: #efefef;}
li {width: 300px; height:28px; line-height:28px;}
li a {
display: block;
width: 300px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /*--4 opera--*/
text-overflow: ellipsis;}

li:not(p)
{ clear: both;}
li:not(p) a
{max-width: 276px;float: left;}/*--firefox   so BT--*/
li:not(p):after
{content: "";float: left;width:25px;padding-left: 5px;color: #d90000;}

-->
</style>
</head>

<body>
<ul>
<li><a href="#" title="一个定位于不同语言国家的企业网站势必需要">一个定位于不同语言国家的企业网站言国家的企业网站言国家的企业网站势必需要</a></li>
<li><a href="#" title="离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标”也是企业无形资产的组成部分业形象和文化的重要">离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标” 也是企业无形资产的组成部分业形象和文化的重要</a></li>
<li><a href="#" title="网站的目的消费者和受众的特点是什么国家的企业网站势必需要">网站的目的消费者和受众的特点是什么国家的企业网站势必需要</a></li>
<li><a href="#" title="一个定位于不同语言国家的企业网站">一个定位于不同语言国家的企业网站</a></li>
<li><a href="#" title="一个定位于的消费者和受众的特点是什么站势必需要">一个定位于的消费者和受众的特点是什么站势必需要</a></li>
<li><a href="#" title="离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标”也是企业无形资产的组成部分业形象和文化的重要">离开网站（或者只是利用第三方网站）去谈电子商务是不可能的企业的网址被称为“网络商标” 也是企业无形资产的组成部分业形象和文化的重要</a></li>
</ul>
</body>
</html>

超出的文字显示为省略号.

分享到：