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=utf-8"
/>
<title>CSS代码文字段落设置</title>
<style
type="text/css">
.one
{
font-size:10pt
color:red
font-weight:bold}
.two
{
font-size:18pt
color:green
text-decoration:underline}
.three
{font-size:18pt
color:blue
text-decoration:overline}
</style>
</head>
<body>
<p
class="one">网站字号建议使用"px"为单位
,大小一般为:"12px~14px",太大会出现剧齿,比较难看
备注:pt与px的关系
(pt=px乘以3/4
)</p>
<p
class="two">网站字号建议使用"px"为单位
,大小一般为:"12px~14px",太大会出现剧齿,比较难看
备注:pt与px的关系
(pt=px乘以3/4
)</p>
<p
class="three">网站字号建议使用"px"为单位
,大小一般为:"12px~14px",太大会出现剧齿,比较难看
备注:pt与px的关系
(pt=px乘以3/4
)</p>
</body>
</html>
把下列代码拷到记事本,后缀改为html<style>
.style1 { font-size:10ptcolor:#FF0000font-weight:bold}
.style2 { font-size:18ptcolor:#00FF00text-decoration:underline}
.style3 {font-size:18pttext-decoration:overlinecolor:#0000FF}
</style>
<body>
<p class="style1">CSS分类使用</p>
<p class-"style2">CSS分类使用</p>
<p class-"style3">CSS分类使用</p>
</body>
css截取多行文字可以使用容器的超出隐藏来实现,注意:多行无法截取后面不会出现省略号;
1、因为要对其设定宽高,所以设置容器为block或者inline-block;
2、设置overflow:hidden让超出内容的部分不显示;
3、为了避免长单词,长的数字不换行,还需要对该容器设置:word-break:break-allword-wrap:break-word
这样就可以实现了文字的截取效果;
具体代码如下:
<style>.wordwrap{width:100pxheight:36pxline-height:18pxfont:400 12px/1.5 Simsunoverflow:hiddenword-break:break-allword-wrap:break-word}
</style>
<div class="wordwrap">
<span>文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取</span>
</div>