您所在的位置:小祥子 » 编程 » CSS » 正文

css3 文本记

时间:2015-07-14 编辑:枫小炀 来源:CnBlogs

CSS3-">css3 文本

  在css文本功能上主要分为三大类:字体,颜色和文本。


text-shadow

  设置文本阴影

text-shadow:color x-offset y-offset blur-radius

  color:阴影颜色,可选。
  x-offset:x轴偏移量,其值为正,阴影在右边,其值为负,阴影在左边。
  y-offset:y轴偏移量,其值为正,阴影在下边,其值为负,阴影在上边。
  blur-radius:阴影模糊半径,可选,代表阴影向外模糊的模糊范围。

  还可以为文本指定多个阴影,中间使用逗号分隔。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    div{
       text-shadow:2px 2px 1px red,
                   4px 4px 1px yellow,
                   6px 6px 1px blue,
                   8px 8px 1px black;
    }
</style>
</head>
<body>
	<div>胸无大志者,必受制于人</div>
</body>
</html> 

text-overflow

  设置文本溢出

text-overflow:clip | ellipsis

  clip:文本溢出时剪切其内容。
  ellipsis:文本溢出时显示省略号标记(...)。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    div{
       width:100px;
       border:1px solid;
       text-overflow:clip;
    }
</style>
</head>
<body>
	<div>胸无大志者,必受制于人胸无大志者,必受制于人胸无大志者,必受制于人</div>
</body>
</html>

  可以看出,单纯的设置文本溢出并没有任何效果,因为自动换行,盒子的高度被内容撑开了,所以我们强制文本不换行(white-space:nowrap)。并设置溢出属性为隐藏(overflow:hidden)。

div{
   width:100px;
   border:1px solid;
   text-overflow:clip;
   overflow:hidden;
   white-space:nowrap;
}

  ellipsis效果

div{
   width:100px;
   border:1px solid;
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

  最后一个字符被替换成了省略号。

word-wrap

  可以看出,浏览器没有制止URL地址换行,它强行溢出了盒子边框,使用word-wrap可以实现长单词与URL地址的自动换行。

word-wrap:normal | break-word

  normal:默认值,浏览器只在半角空格或连字符的地方进行换行。
  break-word:将内容在边界内换行。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    div{
       width:100px;
       border:1px solid;
       word-wrap:break-word;
    }
</style>
</head>
<body>
	<div>http://www.baidu.com胸无大志者,必受制于人胸无大志者,必受制于人胸无大志者,必受制于人</div>
</body>
</html>

  可见,URL地址在边框边缘处强制换行了。

word-break

  使用word-break属性来决定自动换行的处理方法。通过具体的属性设置,不仅可以让浏览器实现半角空格或连字符后面的换行,而且还可以让浏览器实现任意位置的换行。

word-break:normal | break-all | keep-all

  word-break属性用于设置或检索对象内文本的字内换行行为,在出现多种语言的情况下尤其有用。
  normal:默认值,使用浏览器默认的换行规则。
  break-all:允许在单词内换行。
  keep-all:只能在半角空格或连字符处换行。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    div{
       width:100px;
       border:1px solid;
       word-break:normal;
    }
</style>
</head>
<body>
	<div>https://www.baidu.com胸无大志者,必受制于人胸无大志者,xixihahasuisuiniannian必受制于人胸无大志者,必受制于人</div>
</body>
</html>

  默认情况,URL地址与长单词不会自动换行。

    div{
       width:100px;
       border:1px solid;
       word-break:break-all;
    }

  当值为break-all时,与word-wrape的值为word-break的效果类似。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    div{
       width:100px;
       border:1px solid;
       word-break:keep-all;
    }
</style>
</head>
<body>
	<div>https://www.baidu.com 胸无大志者,必受制于人 胸无大志者,必受制于人 胸无大志者,必受制于人</div>
</body>
</html>

  当值为keep-all时,只在空格处实行换行。

white-space

  用来处理元素中的空白符。

white-spcae:normal || pre || nowrap || pre-line || pre-wrap || inherit

  normal:默认值,空白会被浏览器忽略。
  pre:空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。
  nowrap:文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。
  pre-wrap:保留空白符序列,但是正常地进行换行。
  pre-line:合并空白符序列,但是保留换行符。
  inherit:规定应该从父元素继承 white-space 属性的值。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    div{
       width:100px;
       border:1px solid;
       white-space:normal;
    }
</style>
</head>
<body>
<div>https://www.baidu.com   
胸无大志者,必     受制
于人 胸无大志者,必受制    于人 胸无大志者,
必受制于人</div>
</body>
</html>

  默认时(normal),空白符合并,回车符忽略,自动换行。

div{
   width:100px;
   border:1px solid;
   white-space:pre;
}

  当值为pre时,保留空白符与回车符,不自动换行。

div{
   width:100px;
   border:1px solid;
   white-space:pre-wrap;
}

  当值为pre-wrap时,保留空白符与回车符,自动换行。

div{
   width:100px;
   border:1px solid;
   white-space:pre-line;
}

  当值为pre-line时,空白符合并,回车符保留,自动换行。

css3文本完。然学习之路,却不止

关键词:文本