在css中设置文本行高的属性是

html-css026

在css中设置文本行高的属性是,第1张

在css中设置文本行高的属性是lineheight。根据查询相关资料显示:css文本行高属性是lineheight,该属性可以设置行间的距离行高,语法lineheight值,属性值不可为负数。

方法一:内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)

方法二:内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)

方法三:外链样式,同方法二,只不过将样式新建一个文件引入即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<style>

.duangao{

height:100px border:1px solid #00f

}

</style>

</head>

<body>

方法一内嵌样式(为了方便查看效果我给这个段落加了个红色的边框):

<p style="height:100px border:1px solid #f00">这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.</p>

方法二内链样式(为了方便查看效果我给这个段落加了个红色的边框):

<p class="duangao">这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.</p>

方法三外链样式,同方法二,只不过将样式新建一个文件引入即可

</body>

</html>

最终效果图如下:

如果想使单行文字垂直居中,即文字不多,将行高和段落设为一样的数值即可。如:height:100pxline-height:100pox

两种方式:

1:通过p标签,配合padding属性设置进行控制:

<p style="display:blockheight:5pxpadding:0px 10px">任意写一段文字www.jingshuiqi.link</p>

2:通过line-height标签进行控制(优选):

<p style="line-height:30px;">任意写一段文字</p>

以上以内联样式举例,字体方面使用font-size属性控制字体大小,可以多测试几次。