CSS代码文字段落设置

html-css022

CSS代码文字段落设置,第1张

<!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=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>