控制文本显示的样式属性
- text-align 文字水平显示方式
- line-height 文字垂直显示方式
- text-decoration 文本的修饰方式
- text-indent 文本的缩进方式
- letter-spacing 文本中字母的间距(对单个汉字或英文字母)
- word-spacing 词间距(对用空格隔开的汉语词语或单词作用)
- word-break 强制换行
- white-space 强制不换行
- 文本超出的时候的处理方式
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
text-align 文字水平显示方式
text-align属性是文字水平的显示方式,主要时候控制文字在水平方向的3中状态:left居于左侧显示,right 居于右侧显示,center居中显示
text-align:left; //居左侧显示
text-align:right; //居右侧显示
text-align:center; //居中显示
注意:text-align不仅仅对我们的文本有用,对我们的行级元素以及img标签都是有用的。,注意text-align是给文本的父级标签设置的,并且父级元素必须是块级元素,如果是行级元素的话,默认是内容撑开宽高的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-align文本样式显示</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;border: 1px solid red;margin: 50px auto}
.main .text{text-align: left}
.main .span_style{text-align: center}
.main .img_style{text-align: right;}
</style>
</head>
<body>
<div class="main">
<div class="text">
关关雎鸠,在河之洲。窈窕淑女,君子好逑。<br>
参差荇菜,左右流之。窈窕淑女,寤寐求之。<br>
求之不得,寤寐思服。悠哉悠哉,辗转反侧。<br>
参差荇菜,左右采之。窈窕淑女,琴瑟友之。<br>
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。<br>
</div><br>
<div class="span_style">
<span>长歌行</span><br>
<span>青青园中葵,朝露待日晞。</span><br>
<span>阳春布德泽,万物生光辉。</span><br>
<span>常恐秋节至,焜黄华叶衰。</span><br>
<span>百川东到海,何时复西归?</span><br>
<span>少壮不努力,老大徒伤悲!</span>><br>
</div>
<div class="img_style">
<img width="100px" height="100px" src="http://img002.21cnimg.com/photos/album/20150702/m600/2D79154370E073A2BA3CD4D07868861D.jpeg" alt="">
</div>
</div>
</body>
</html>
显示效果如下所示:
line-height 文字垂直显示方式
line-hight主要是行高,文字垂直显示方式,参考前一篇博客文字样式中的行高
值为像素,当给定的值和父级盒子的高度一致时,文字会在元素中垂直居中显示
text-decoration 文本的修饰方式
text-decoration主要是用于文本的修饰方式,文本修饰方式常用为四种属性值,
none表示默认,即没有文本修饰样式,
underline定义文本下的一条线,类似ins标签,
overline定义在文本上的一条线
line-through定义穿过文本的一条线,类似del标签
使用的方式如下所示:
text-decoration:none; //默认,定义标准的文本
text-decoration:underline; //定义文本下的一条线
text-decoration:overline; //定义文本上的一条线
text-decoration:line-through; //定义穿过文本的一条线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
.main .text_decoration_nono{
text-decoration: none;
}
.main .text_decoration_overline{
text-decoration: overline;
}
.main .text_decoration_underline{
text-decoration: underline;
}
.main .text_decoration_line_through{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="main">
<div class="text_decoration_nono">默认,定义标准的文本</div><br>
<div class="text_decoration_underline">定义文本下的一条线</div><br>
<div class="text_decoration_overline">定义文本上的一条线</div><br>
<div class="text_decoration_line_through">定义穿过文本的一条线</div><br>
</div>
</body>
</html>
显示的效果如下所示:
text-indent 文本的缩进方式
text-indent主要的意思是首行缩进,大概的使用场景就是缩进的距离用来做图片加载,或者是一个段落的开头往往需要2个空格,那么浏览器不会识别多个空格,多个空格仅仅只会去加载一个。这就需要用到我们的首行缩进
text-indent:的属性值可以是px,可以是em,可以是rem等
如 :
text-indent:20px;
text-indent:2em;
text-indent:2rem;
text-indent:20%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
.main .px p{text-indent: 2em;}
.main .em span{text-indent: 20px}
.main .rem{text-indent: 2rem}
</style>
</head>
<body>
<div class="main">
<div class="px">
<p>一袭素香,两袖清绝,浩渺天地间惊鸿一眸,袅娜娉婷的娇艳月容便落入古往今来爱梅之人的轻盈文字里,久了便岁月生香。书一纸墨梅清痕,用冰冷的指尖在嫩寒清晓里写下孑然一身的随遇而安。弥望时光,不管是凌寒独自开的肃然缄默,还是输梅一段香的千古绝赞,梅花,在百花齐眠的冷冬,它,终究是茕茕孓立的寂莫。</p>
</div><br>
<div class="em">
<span>一直也想落笔梅香满袖的楚楚动人,奈何心懒手拙,从来都是看他人煮字暖情的精致,听寒香梅雪蕊绽花落的慨叹,然后也跟着低眉浅笑温暖的期许。如今又是岁幕天寒,再次遇梅,内心倒多出几分怜惜,误入繁苑,怎知那抹疏影倾城的空灵洁净是否甘心尽洗铅华的寂寞?那不与凉风的娇媚怎知不是花蕊深处轻轻的遗憾?</span>
</div><br>
<div class="rem">
都说清梅孤傲圣洁,曾经我也这样觉得,如今却不以为然。世人总爱将自己的想当然强加于喜欢的花叶山水上,仅仅因为在残枝败柳的冬季唯有它傲放于天地,便说它一任群芳妒,因为数九寒天里物以稀为贵的梅红雪白,便说它无意苦争春。却忘了那暗香徐徐的素梅,一直是默然于世,恬淡不惊,在冬日的宁静里沉淀着自己的情绪。
</div>
</div>
</body>
</html>
注意:text-indent属性是针对块级元素的,行级元素默认是内容撑开高度,所以设置text-indent是无效的
显示效果如下所示:
letter-spaceing 文本中字母的间距(对单个汉字或英文字母)
letter-spacing,其中letter表示字母,文字的意思,spacing表示间隔,所以语义解释为letter-spacing即为字母间距,
letter-spacing的属性值为px
即
letter-spacing:10px;//这样的话,文字就不会显得拥挤
在上个代码上面进行修改,即可看出来效果
.main .px p{text-indent: 2em;letter-spacing: 10px;}
.main .em span{text-indent: 20px;letter-spacing: 20px}
.main .rem{text-indent: 2rem;letter-spacing: 30px}
显示:
从上面可以看到,这个属性是不分行块的,行级元素也是可以有字间距的
word-spacing 词间距(对用空格隔开的汉语词语或单词作用)
与上面的letter-spacing相互对应的,即单词间距,首先要确定是单词,因为每个词语之间是要有空格进行分割的,连在一起的一句话并不叫单词,所以word-spacing即为词间距
使用方式与letter-spacing类似:
word-spacing:20px;//将每个词语的间距放到了20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
.main .word_spacing{word-spacing: 30px}
.main .nomal{word-spacing: 30px}
</style>
</head>
<body>
<div class="main">
<div class="word_spacing">
i like study html and css!!!
</div>
<div class="nomal">
与上面的letter-spacing相互对应的,即单词间距,首先要确定是单词,因为每个词语之间是要有空格进行分割的,连在一起的一句话并不叫单词,所以word-spacing即为词间距
</div>
</div>
</body>
</html>
显示效果如下所示:
在上面的单词间距被拉大到了30px,因为它们是一个个单词,但是再后一句中并没有发生改变,因为它是一句话,并不是词语。
word-break 强制换行
word-break即是强制换行的意思,有时候我们的标签宽度是有限的,这个时候可能就需要换行,而work-break是支持在单词内换行,即是剩余的空格不足以显示完整单词的时候,会将单词分隔,然后上下显示各一部分
word-break:break-all;
word-break:keep-all;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
.main .demo1{
width: 100px;
border: 1px solid green;
}
.main .demo2{
width: 100px;
word-break:break-all;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="demo1">
1 i want to be a good coder!!!!
</div><br>
<div class="demo2">
2 i want to be a good coder!!!!
</div>
</div>
</body>
</html>
显示如下所示:
从上面就可以看出来,设置了break-all的属性值的话,这个时候换行是将单词进行了拆分,默认的情况是不支持单词内换行的
white-space 强制不换行
white-space是强制是否换行的意思,因为有时候布局的情况下,会遇到超出的文字不允许显示到第二行,那么这个时候就需要white-space与文本超出处理方式进行配合使用
white-space:nowrap;//强制不换行
white-space:wrap;//换行(默认是换行的)
在上述代码上面做点修改:
.main .demo2{
width: 100px;
border: 1px solid blue;
white-space: nowrap;
}
显示效果如下:
demo2的显示是不换行的,但是会出现一个问题就是它超出了我们原来的父级区域,超出了父级显示,所以需要结合文本超出的时候的来进行处理
文本超出的时候的处理方式
文本超出的时候的处理方式,即文本在不换行的情况下,超出父级的时候,所有超出的文本全部以“…”的形式进行显示
只要记住这三个属性配合使用即可:
white-space: nowrap; //强制不换行
overflow:hidden; //超出隐藏
text-overflow: ellipsis; //文本超出显示的样式
对上面的代码进行修改:
.main .demo2{
width: 100px;
border: 1px solid blue;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
显示如下所示:
可以看到demo2中显示的超出文本显示的部分全部以…的形式进行展示,但是…是居中显示的。