CSS常用样式

最新推荐文章于 2025-04-26 22:22:48 发布

转载最新推荐文章于 2025-04-26 22:22:48 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huangxin1118/p/5772206.html

本文详细介绍了CSS中段落样式的各项属性，包括行高、段落缩进、段落对齐、文字间距、文字溢出和段落换行等，并通过实例展示了这些属性的具体应用。

段落样式

　　1）行高

　　　　控制段落内每行高度

　　　　line-height : normal | length

　　例子源代码：

/* CSS代码 */
.normal{
    line-height:normal;
}
.length{
    line-height:30px;
}

<!-- HTML代码 -->
<body>
    <p class="normal">这是正常的行高<br>这是正常的行高<br>这是正常的行高</p>
    <p class="length">这是30px的行高<br>这是30px的行高<br>这是30px的行高</p>
</body>

　　效果：

这是正常的行高
这是正常的行高
这是正常的行高

这是30px的行高
这是30px的行高
这是30px的行高

　　如果在一个元素中有一行文字，而行高等于元素的高度，那么这一行文字就会垂直居中。

　　*注意是一行文字，而且先要把浏览器原有的内外边距干掉。

　　例子源代码：

/* CSS代码 */
*{
    margin:0;
    padding:0;
}
.box{
    width:100px;
    height:100px;
    line-height:100px;
    border:1px solid #000;
}

<!-- HTML代码 -->
<body>
    <div class="box">
        <p>这是一行文字</p>
    </div>
</body>

　　效果：

　　2）段落缩进

　　　　控制段落的首行缩进

　　　　text-indent : length

　　例子源代码：

/* CSS代码 */
.indent{
    text-indent:2em;
}

<!-- HTML代码 -->
<body>
    <p class="normal">这里没有首行缩进</p>
    <p class="indent">这里首行缩进了2em</p>
</body>

效果：

这里没有首行缩进

这里首行缩进了2em

　　3）段落对齐

　　　　控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。

　　　　text-align : left | right | center | justify

　　例子源代码：

/* CSS代码 */
.box2{
    width:300px;
    border:1px solid #000;
}
.left{
    text-align:left;
}
.center{
    text-align:center;
}
.right{
    text-align:right;
}

<!-- HTML代码 -->
<body>
    <div class="box2">
        <p class="left">左对齐文本</p>
        <p class="center">居中对齐文本</p>
        <p class="right">右对齐文本</p>
    </div>
</body>

　　效果：

左对齐文本

居中对齐文本

右对齐文本

　　4）文字间距

　　　　控制段落的文字间的距离

　　　　letter-spacing : normal | length

　　例子源代码：

/* CSS代码 */
.normal{
    letter-spacing:normal;
}
.length{
    letter-spacing:10px;
}

<!-- HTML代码 -->
<body>
    <p class="normal">这是默认的文字间距</p>
    <p class="length">这是10px的文字间距</p>
</body>

　　效果：

这是默认的文字间距

这是10px的文字间距

　　5）文字溢出

　　　　控制文本内容溢出部分的样式

　　　　text-overflow : clip | ellipsis

　　　　clip : 当内联内容溢出块容器时，将溢出部分裁切掉。

　　　　ellipsis : 当内联内容溢出块容器时，将溢出部分替换为（...）。

　　　　因为text-overflow只是用来说明文字溢出时用什么方式显示，所以还需要定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），这样才能实现溢出文本被裁切或是显示省略号的效果。

　　例子源代码：

/* CSS代码 */
.clip,.ellipsis{
    width:150px;
    border:1px solid #000;
    white-space:nowrap;
    overflow:hidden;
}
.clip{
    text-overflow:clip;
}
.ellipsis{
    text-overflow:ellipsis;
}
.clip:hover,.ellipsis:hover{
    text-overflow:inherit;
    overflow:visible;
}

<!-- HTML代码 -->
<body>
    <p>当你把光标移动到一下文本上，就能看到全部文本。</p>
    <div class="clip">这里使用的是"text-overflow:clip"</div>
    <div class="ellipsis">这里使用的是"text-overflow:ellipsis"</div>
</body>

　　效果：

当你把光标移动到一下文本上，就能看到全部文本。

这里使用的是"text-overflow:clip"

这里使用的是"text-overflow:ellipsis"

　　6）段落换行

　　　　控制内容超过容器的边界时是否换行（一般用于英文和URL地址）

　　　　word-wrap : normal | break-word

　　　　normal : 允许内容顶开或溢出指定的容器边界。浏览器默认处理

　　　　break-word : 内容将在边界内换行。如果需要，单词内部允许换行。

　　例子源代码：

/* CSS代码 */
    .break{
        width:300px;
        border:1px solid #000;
        word-wrap:break-word;
    }

<!-- HTML代码 -->
<body>
    <div class="break">我的博客：http://www.cnblogs.com/mossbaoo/</div>
</body>

　　效果：（URL地址会另外换行）

我的博客：http://www.cnblogs.com/mossbaoo/

4.段落样式

　　1）行高

　　　　控制段落内每行高度

　　　　line-height : normal | length

　　例子源代码：

/* CSS代码 */
.normal{
    line-height:normal;
}
.length{
    line-height:30px;
}

<!-- HTML代码 -->
<body>
    <p class="normal">这是正常的行高<br>这是正常的行高<br>这是正常的行高</p>
    <p class="length">这是30px的行高<br>这是30px的行高<br>这是30px的行高</p>
</body>

　　效果：

这是正常的行高
这是正常的行高
这是正常的行高

这是30px的行高
这是30px的行高
这是30px的行高

　　如果在一个元素中有一行文字，而行高等于元素的高度，那么这一行文字就会垂直居中。

　　*注意是一行文字，而且先要把浏览器原有的内外边距干掉。

　　例子源代码：

/* CSS代码 */
*{
    margin:0;
    padding:0;
}
.box{
    width:100px;
    height:100px;
    line-height:100px;
    border:1px solid #000;
}

<!-- HTML代码 -->
<body>
    <div class="box">
        <p>这是一行文字</p>
    </div>
</body>

　　效果：

　　2）段落缩进

　　　　控制段落的首行缩进

　　　　text-indent : length

　　例子源代码：

/* CSS代码 */
.indent{
    text-indent:2em;
}

<!-- HTML代码 -->
<body>
    <p class="normal">这里没有首行缩进</p>
    <p class="indent">这里首行缩进了2em</p>
</body>

效果：

这里没有首行缩进

这里首行缩进了2em

　　3）段落对齐

　　　　控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。

　　　　text-align : left | right | center | justify

　　例子源代码：

/* CSS代码 */
.box2{
    width:300px;
    border:1px solid #000;
}
.left{
    text-align:left;
}
.center{
    text-align:center;
}
.right{
    text-align:right;
}

<!-- HTML代码 -->
<body>
    <div class="box2">
        <p class="left">左对齐文本</p>
        <p class="center">居中对齐文本</p>
        <p class="right">右对齐文本</p>
    </div>
</body>

　　效果：

左对齐文本

居中对齐文本

右对齐文本

　　4）文字间距

　　　　控制段落的文字间的距离

　　　　letter-spacing : normal | length

　　例子源代码：

/* CSS代码 */
.normal{
    letter-spacing:normal;
}
.length{
    letter-spacing:10px;
}

<!-- HTML代码 -->
<body>
    <p class="normal">这是默认的文字间距</p>
    <p class="length">这是10px的文字间距</p>
</body>

　　效果：

这是默认的文字间距

这是10px的文字间距

　　5）文字溢出

　　　　控制文本内容溢出部分的样式

　　　　text-overflow : clip | ellipsis

　　　　clip : 当内联内容溢出块容器时，将溢出部分裁切掉。

　　　　ellipsis : 当内联内容溢出块容器时，将溢出部分替换为（...）。

　　例子源代码：

/* CSS代码 */
.clip,.ellipsis{
    width:150px;
    border:1px solid #000;
    white-space:nowrap;
    overflow:hidden;
}
.clip{
    text-overflow:clip;
}
.ellipsis{
    text-overflow:ellipsis;
}
.clip:hover,.ellipsis:hover{
    text-overflow:inherit;
    overflow:visible;
}

<!-- HTML代码 -->
<body>
    <p>当你把光标移动到一下文本上，就能看到全部文本。</p>
    <div class="clip">这里使用的是"text-overflow:clip"</div>
    <div class="ellipsis">这里使用的是"text-overflow:ellipsis"</div>
</body>

　　效果：

当你把光标移动到一下文本上，就能看到全部文本。

这里使用的是"text-overflow:clip"

这里使用的是"text-overflow:ellipsis"

　　6）段落换行

　　　　控制内容超过容器的边界时是否换行（一般用于英文和URL地址）

　　　　word-wrap : normal | break-word

　　　　normal : 允许内容顶开或溢出指定的容器边界。浏览器默认处理

　　　　break-word : 内容将在边界内换行。如果需要，单词内部允许换行。

　　例子源代码：

/* CSS代码 */
    .break{
        width:300px;
        border:1px solid #000;
        word-wrap:break-word;
    }

<!-- HTML代码 -->
<body>
    <div class="break">我的博客：http://www.cnblogs.com/mossbaoo/</div>
</body>

转载于:https://www.cnblogs.com/huangxin1118/p/5772206.html