CSS_文本样式

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54710444

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>

相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
29 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
27 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
7天前
|
前端开发
|
10天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式
|
1月前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式