CSS这段代码想显示每行固定数量的文字怎么改!最好给予标注

html-css020

CSS这段代码想显示每行固定数量的文字怎么改!最好给予标注,第1张

CSS文字超出固定的字符数用省略号替代 :

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>CSS文字超出固定的字符数用省略号替代</title>

</head>

<style type="text/css">

/*<![CDATA[*/

body{

font-size:12px

line-height:22px

}

li {

width:200px

white-space:nowrap

text-overflow:ellipsis

-o-text-overflow:ellipsis

overflow: hidden

}

/*]]>*/

</style>

</head>

<body>

<ul>

<li><a href="#">天下獒是中国藏獒信息专业的门户网站,拥有丰富的藏獒新闻、藏獒交易、养獒知识、藏獒图片、藏獒视频和藏獒基地等信息,是养獒爱獒者 赏藏、买藏、卖藏、论獒最好的最全面的专业信息平台。</a></li>

<li><a href="#">天下獒是中国藏獒信息专业的门户网站,拥有丰富的藏獒新闻、藏獒交易、养獒知识、藏獒图片、藏獒视频和藏獒基地等信息,是养獒爱獒者 赏藏、买藏、卖藏、论獒最好的最全面的专业信息平台。</a></li>

<li><a href="#">文本溢出自动省略测试文本溢出自动省略测试</a></li>

<li><a href="#">天下獒是中国藏獒信息专业的门户网站,拥有丰富的藏獒新闻、藏獒交易、养獒知识、藏獒图片、藏獒视频和藏獒基地等信息,是养獒爱獒者 赏藏、买藏、卖藏、论獒最好的最全面的专业信息平台。</a></li>

<li><a href="#">文本溢出自动省略测试</a></li>

</ul>

</body>

</html>

css文件对页面影响不大,就算是你写3万行也没太大影响,一般主要影响页面的是图片、动态脚本、flash动画、后台程序;如果你工作不负责后台的话,那你就注意切图的时候尽量把图片处理的小一些,能1px平铺的就平铺,能用代码实现的就尽量别用图片,页面的动态效果尽量少一些,或者说没太大必要的就别弄,至于flash动画,能用gif代替就尽量别用swf文件;

我一般写样式是不换行的,例如:

.divstyle{ color:#fffborder:1px solid redbackground:#000height:40px}

我习惯于这样写,这样能减少行数,一次能看到的样式数量会更多,比较方便于我修改;

很多人都习惯于下面这种写法,例如:

.divstyle{

color:#fff

border:1px solid red

background:#000

height:40px

}

这样的写法比较规整,看样式能够一目了然明白,只是行数太多了