CSS文本样式完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53977993/article/details/127300461

本文详细介绍了CSS中各种文本样式的设置方法，包括行间距、文本大小写、上下划线、字符间距、单词间距、文本对齐、首行缩进、单行和多行文本省略号、文本阴影、元素转换以及图文对齐方式。还讨论了经典面试题——图片三像素问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是图片三像素的问题，如何解决这个问题？

行间距

p{line-height: 200px;}

行间距又叫行高，是文字占有的实际高度。行高=上间距+字体的大小+下间距(其中：字体是垂直居中显示，上间距=下间距)。我们一般用line-height来设置行高。

p{
line-height: 200px;    可以直接放一个大小
             2         还可以放倍数(是当前字体大小的倍数)
             200%      也可以放百分比
}

font中也可以指定行高。(例如：font:字体大小/行高字体类型;)

p{font:30px/50px serif;}

小妙招

如何单行文本在父元素中垂直居中？

答：只要设置父元素的行高和高度一致即可。

图例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
    <style>
.box{
        height: 200px;
        line-height: 200px;
        background-color: aqua 
        }
    </style>
</head>
<body>
    <div class="box">
      <a href="#">我是一个超链接</a>
</div>
</body>
</html>

如何设置文本的大小写？

text-transform可以用来设置文本的大小写。

p{
            text-transform:none;       默认值:文本正常显示
                           lowercase   文本以小写字母显示
                           uppercase   文本以大写字母显示
                           capitalize  首字母大写
}

如何设置文本的上下划线？

text-decoration可以用来设置文本的修饰。

 p{
            text-decoration:none;         默认值:文本正常显示
                            overline      上划线
                            underline     下划线
                            line-through  删除线     
        }

如何设置指定字符的间距？

letter-spacing可以用来指定字符间距。

p{letter-spacing: 20px;}

如何设置单词之间的距离？

word-spacing可以用来设置单词之间的距离。

p{word-spacing: 20px;}

如何设置文本的对齐方式？

text-align可以用来设置文本的对齐方式。

 p{
            text-align: left;    默认值:文本靠左显示
                        right    文本靠右显示
                        center   文本居中显示
                        justify  两端对齐       
        }

如何设置首行缩进？

text-indent可以用来设置首行缩进。

p{text-indent: 2rem;}

注意：text-indent常用的长度单位有： px，em ，rem...

如何设置单行文本的省略号？

固定写法：

p{
            width: 200px;/* 设置一个固定的宽度 */
            white-space:nowrap;/* 设置不换行 */
            overflow: hidden;/* 裁剪多余 */
            text-overflow: ellipsis;/* 设置溢出内容以省略号的形式出现 */    
        }

注意：white-space可以用来设置网页处理空白；text-overflow 可以用来处理文本溢出(包含元素时)发生的事情。

那如何设置多行文本的省略号呢？

p{
            width: 200px;/* 设置一个固定的宽度 */
            display: -webkit-box;/* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical;/* 检索伸缩盒对象的子元素的排列方式 */
            -webkit-line-clamp: 3;/* 限制在一个块元素显示的文本的行数 */
            overflow: hidden;/* 裁剪多余 */      
        }

适用范围：因使用了WebKit的CSS扩展属性，该方法仅适用于WebKit浏览器及移动端。

如何设置文本的阴影？

text-shadow可以用来设置文本的阴影。

p{text-shadow:10px 10px 10px rgba(255, 0, 0, 0.5);}

text-shadow有4个参数:(1)、阴影的水平位移距离(正值向右偏移，负值向左偏移)。（2）、阴影的垂直位移距离(正值向下偏移，负值向上偏移)。（3）、阴影的模糊半径(默认0px)。（4）、阴影的颜色(一般用rgba颜色,默认是字体的颜色)。

如何实现元素间的相互转化？

摘要

1.行内元素：不会独占一行，宽高是被内容撑开,是不可以设置宽高的。2.块元素：独占一行，宽度是祖先元素的100%，高度是被内容撑开的。3.行内块元素：不会独占一行，可以设置宽高，有三像素的问题。

display可以用来实现元素之间的相互转化。

p{
            display: none;          隐藏元素
                     block         将元素转成块元素
                     inline        将元素转成行内元素
                     inline-block  将元素转成行内块元素
        }

注意：元素之间的相互转换可以用，但还是标签的本来分类为主。

如何设置图文对齐方式？

vertical-align可以设置图文对齐方式。

img{
            vertical-align: baseline;   基线对齐(以英文x最底下为对齐标准)
                            bottom      底部对齐
                            top         顶部对齐
                            middle      居中对齐 
        }

经典面试题

什么是图片三像素的问题，如何解决这个问题？

图片三像素的问题主要是指在页面上图片和文本或其他行内标签与数据在页面上水平方向的对齐方式问题。解决这个问题的方法有很多种，我这里只列举4种：1.将vertical-align属性设置非baseline默认值即可。2.可以设置其父元素的font-size为0(注意：如果父元素里有文字，需要重新设置字体大小)。3.可以将图片转成块元素。4.将元素脱离文档流(例如：设置浮动，设置弹性盒子，设置绝对定位)。