CSS文本样式基本设置--小结

- 日理万妓 2024-03-27 16:39 117阅读 0赞

## 一、分类 ##

1.  text-indent 首行缩进，单位em

1.  text-align 文本对齐方式，left,center,right

1.  text-decoration 文本修饰线none ,underline ,overline ,line-through

1.  text-transform 文本大小写 none capitalize首字母大写 uppercase lowercase

1.  text-overflow 文本溢出包含块的显示样式 clip剪切 ellipse省略号显示 必须配合 overflow:hidden;white-spacing:nowrap;

1.  text-shadow 文字阴影x水平方向正数右移 y垂直方向正数下移 blur模糊半径 color

1.  line-height 设置文本高度 行高=上间距+文字高度+下间距 ,上下间距相等

1.  letter-spacing 设置字符间的距离中英文都行

1.  word-spacing 设置单词与单词之间的距离

1.  white-spacing 设置空白处理 , nowrap不换行 ,per保留空白

1.  vertical-align 设置行内 ,行内块元素垂直对齐方式

## 二、代码演示(部分) ##

#span01 {
            text-transform: capitalize;
            text-transform:uppercase;
        }
        #span02 {
            text-overflow: clip;
        
        }
        #div01 {
            background-color: pink;
            width: 90px;
            /* 必须配合一下使用 */
            overflow: hidden;
            text-overflow: clip;
            white-space: nowrap;
        }
        #div02 {
            text-shadow: 2px 3px 2px red;
            font-size: 50px; 
        }
        #div03 {
            letter-spacing: 1em;
        }
        #div04 {
            word-spacing: 1em;
        }

<span id="span01">hello everybody,my name is html,how do you do</span>
        <div id="div01">
            量釜谭没兴国，撒降善判但畴珍，脱承不将。
            
        </div>
        <div id="div02">意兮</div>
        <div id="div03">举圣后，生事。what is you name ?</div>
        <div id="div04">世界你好。Lorem ipsum dolor sit amet.</div>

![0401d63c629b74f8a1c841080583424a.png][]

[0401d63c629b74f8a1c841080583424a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1ce3ab0261a24727b00ba5797aa12793.png