常用文本的一些用法

一、text-transform

文本大小写转换

1.capitalize 将每个单词的第一个字母转换为大写

.capitalize {
        text-transform: capitalize;
    }
hello world! 

image.png

2.uppercase 将每个单词转换为大写

.uppercase {
        text-transform: uppercase;
    }
hello world! 

image.png

3.lowercase 将每个单词转换为小写

.lowercase {
        text-transform: lowercase;
    }
HELLO WORLD! 

image.png

二、white-space

设置元素内空格的处理方式
1.pre 不合并文字之间的空白距离，当文字超出边界时不换行。

.pre{
        white-space: pre;
        border: 1px solid #ccc;
        width: 100px;
        height: 100px;
    }

        不合并文字之间的空白距离，
        当文字超出边界时不换行。
 

image.png

2.nowrap 强制在同一行显示所有文本，直到文本结束或br换行。

.nowrap{
        white-space: nowrap;
        border: 1px solid #ccc;
        width: 100px;
        height: 100px;
        margin-top: 10px;
    }

            不合并文字之间的空白距离，
            当文字超出边界时不换行。

image.png

3.pre-wrap 不合并文字之间的空白距离，当文字碰到边界换行处理

.prewrap{
        white-space: pre-wrap;
        border: 1px solid #ccc;
        width: 100px;
        height: 100px;
        margin-top: 10px;
    }
 

            不合并文字之间的空白距离，
            当文字碰到边界换行处理
     

image.png

4.pre-line 保持文本的换行，不保留文字之间的空白距离，当文字碰到边界时换行

 .preline{
        white-space: pre-line;
        border: 1px solid #ccc;
        width: 100px;
        height: 100px;
        margin-top: 10px;
    }
     

            保持文本的换行，不保留文字之间的空白距离，
            当文字碰到边界时换行
     

image.png

三、text-overflow

当文本溢出的时候是否显示省略号
clip：不显示，直接切掉溢出部分；
ellipsis：显示省略号

.ellipsis{
        border: 1px solid #ccc;
        width: 100px;
        text-overflow: ellipsis;
        white-space: nowrap; //需要设置不换行
        overflow: hidden; //超出隐藏
    }

            当文本溢出的时候显示省略号
     

image.png

四、line-height

设置元素的行高，常用于元素垂直居中显示

 .linehight{
       background-color: #000;
       height: 40px;
       line-height: 40px;
       color: #fff;
       text-align: center; /*水平居中显示*/   
    }
  

            设置元素的行高，常用于元素垂直居中显示
     

image.png