一、text-transform
文本大小写转换
1.capitalize 将每个单词的第一个字母转换为大写
.capitalize {
text-transform: capitalize;
}
<p class="capitalize">hello world! </p>
image.png
2.uppercase 将每个单词转换为大写
.uppercase {
text-transform: uppercase;
}
<p class="uppercase">hello world! </p>
image.png
3.lowercase 将每个单词转换为小写
.lowercase {
text-transform: lowercase;
}
<p class="lowercase">HELLO WORLD! </p>
image.png
二、white-space
设置元素内空格的处理方式
1.pre 不合并文字之间的空白距离，当文字超出边界时不换行。
.pre{
white-space: pre;
border: 1px solid #ccc;
width: 100px;
height: 100px;
}
<div class="pre">
不合并文字之间的空白距离，
当文字超出边界时不换行。
</div>
image.png
2.nowrap 强制在同一行显示所有文本，直到文本结束或br换行。
.nowrap{
white-space: nowrap;
border: 1px solid #ccc;
width: 100px;
height: 100px;
margin-top: 10px;
}
<div class="nowrap">
不合并文字之间的空白距离，
当文字超出边界时不换行。
</div>
image.png
3.pre-wrap 不合并文字之间的空白距离，当文字碰到边界换行处理
.prewrap{
white-space: pre-wrap;
border: 1px solid #ccc;
width: 100px;
height: 100px;
margin-top: 10px;
}
<div class="prewrap">
不合并文字之间的空白距离，
当文字碰到边界换行处理
</div>
image.png
4.pre-line 保持文本的换行，不保留文字之间的空白距离，当文字碰到边界时换行
.preline{
white-space: pre-line;
border: 1px solid #ccc;
width: 100px;
height: 100px;
margin-top: 10px;
}
<div class="preline">
保持文本的换行，不保留文字之间的空白距离，
当文字碰到边界时换行
</div>
image.png
三、text-overflow
当文本溢出的时候是否显示省略号
clip：不显示，直接切掉溢出部分；
ellipsis：显示省略号
.ellipsis{
border: 1px solid #ccc;
width: 100px;
text-overflow: ellipsis;
white-space: nowrap; //需要设置不换行
overflow: hidden; //超出隐藏
}
<div class="ellipsis">
当文本溢出的时候显示省略号
</div>
image.png
四、line-height
设置元素的行高，常用于元素垂直居中显示
.linehight{
background-color: #000;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center; /*水平居中显示*/
}
<div class="linehight">
设置元素的行高，常用于元素垂直居中显示
</div>
image.png
