CSS_文本样式

最新推荐文章于 2024-04-30 19:38:51 发布

twilight0402

最新推荐文章于 2024-04-30 19:38:51 发布

阅读量420

点赞数

分类专栏： CSS 文章标签： css 文本样式

本文链接：https://blog.csdn.net/twilight_karl/article/details/54710444

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

text-align 水平对齐

left/center/right左中右
justify 两端对齐
inherit 继承

line-height 文本行间距

行高不够时，行与行之间后重叠
数字px 数字em
数字% 基于字体大小的百分比

text-indent 缩进文本

数字% 父元素的百分比
数字px/数字em 固定值默认为0
inherit继承

letter-spacing 字母间距

normal 默认
数字px 固定值（可为负值）
inherit 继承

word-spacing 单词间距

normal 标准间距
数字px 固定值（可正可负）
inherit 继承

direction 文本方向

ltr 从左到右
rtl 从右到左（类似右对齐）
inherit 继承

text-transform 字符转换

capitalize 每个单词首字母大写
uppercase 全部大写
lowercase 全部小写
none 不做改动

text-decoration 文本装饰

underline 下划线
overline 上划线
line-through 在文本中间的贯穿线
blink 文本闪烁
none 关闭原本应用到一个元素上的所有装饰

white-space 处理空白符

normal 像正常的方式那样忽略换行和多余的空格
pre 可以实现pre标签的样式，不忽略空格和换行
nowrap 防止元素换行
pre-wrap 不仅会保留空白符并保留换行符，还允许自动换行
pre-line 保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处。

他们的区别总结如下：

<html>
    <head>
        <style type="text/css">
            p.normal{
                white-space:normal;
            }
            p.pre{
                white-space:pre;
            }
            p.nowrap{
                white-space:nowrap;
            }
            p.pre-wrap{
                white-space:pre-wrap;
            }
            p.pre-line{
                white-space:pre-line;
            }
        </style>
    </head>
    <body>
    <p class="normal" >normal: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

    <p class="pre" >pre: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

    <p class="nowrap" >newrap: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

        <p class="pre-wrap" >pre-wrap: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

        <p class="pre-line" >pre-line: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>
    </body>
</html>