0
点赞
收藏
分享

微信扫一扫

9、前端开发:CSS知识总结——文本样式(2)


1、white-space

设置网页如何处理空白

可选值:


描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值。

2、text-overflow

当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。

text-overflow 需要配合以下两个属性使用:

white-space: nowrap;

overflow:hidden;

<style>
.p3{
background-color:red;

/*第一步,设置固定宽度*/

width:300px;

/*第二步,设置不换行*/

white-space:nowrap;

/*第三步,设置省略号*/

text-overflow:ellipsis;

/*最后一步,裁剪多余的,溢出的内容*/

overflow:hidden;
}
</style>

3、vertical-align

设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

可选值:


描述

baseline

默认。元素放置在父元素的基线上。

sub

垂直对齐文本的下标。

super

垂直对齐文本的上标

top

把元素的顶端与行中最高元素的顶端对齐

text-top

把元素的顶端与父元素字体的顶端对齐

middle

把此元素放置在父元素的中部。

bottom

使元素及其后代元素的底部与整行的底部对齐。

text-bottom

把元素的底端与父元素字体的底端对齐。

length

将元素升高或降低指定的高度,可以是负数。

%

使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit

规定应该从父元素继承 vertical-align 属性的值。

可用于解决图片三像素问题:设置一个非baseline的样式值。

4、text-shadow

应用于阴影文本。

可选值:


描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。

示例:

text-shadow:10px 30px 1px rgba(0,0,0,.5);

5、box-shadow

应用于标签(元素)阴影,用法和text-shadow一样。

举报

相关推荐

0 条评论