css不负责加入文字，而是美化html中的文字。通过color、font-size、font-family等属性设置文字样式，用line-height、letter-spacing提升可读性，结合text-align、text-shadow增强视觉效果，并利用white-space、overflow、text-overflow处理文本溢出，实现单行或多行省略号，确保布局美观与信息平衡。
很多人初学CSS时，可能会疑惑“CSS怎么加入文字？” 实际上，这是一个小小的概念误区。CSS本身并不“加入”文字，它的核心使命是“打扮”那些已经在HTML里安家的文字。我们可以把HTML想象成房子的骨架和家具，而CSS就是室内设计师，负责涂色、摆放、选择材质。所以，当我们谈论“CSS加入文字”时，真正想问的，是如何用CSS让文字看起来更漂亮、更易读，并适应不同的布局需求。
一旦文字在HTML中存在，比如在一个
<p>
标签或
<h1>
中，CSS就有了用武之地。最直接的，当然是改变颜色、大小和字体。这就像给文字穿上不同的衣服，让它们在网页舞台上焕发光彩。
<p class="my-text">这是一段示例文本，我们将用CSS来美化它。</p>
然后，在CSS中，我们可以这样操作：
.my-text { color: #333; /* 让文字变成深灰色，比纯黑更柔和一些 */ font-size: 18px; /* 设置文字大小 */ font-family: "Helvetica Neue", Arial, sans-serif; /* 选择字体，提供备用字体以防万一 */ line-height: 1.6; /* 增加行高，让段落不那么拥挤，读起来更舒服 */ text-align: justify; /* 让文字两端对齐，视觉上更整洁 */ letter-spacing: 0.5px; /* 稍微增加字间距，提升可读性，尤其对标题有效 */ text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 添加一点点阴影，让文字有点立体感，但不要太重 */ }
这里我们直接通过选择器选中HTML中的文本元素，然后应用一系列CSS属性来控制它的外观。从颜色到字体，再到间距和对齐方式，这些都是CSS美化文字的“工具箱”。
立即学习“前端免费学习笔记（深入）”；
如何为网页文本选择最合适的字体和字号？
选择合适的字体和字号，这可不是小事，它直接影响着用户阅读体验和整个网站的调性。我个人觉得，这有点像为一场重要的活动挑选服装，既要合身，又要符合场合。
首先是字体（
font-family
）。我们通常会从几个方面考虑：
-
系统字体（Web-safe fonts）： 比如Arial, Helvetica, Times New Roman, Georgia等。它们的优点是几乎所有用户的电脑都预装了，显示稳定，加载速度快。缺点是选择有限，可能缺乏个性。我经常会把它们作为备用字体，以防自定义字体加载失败。
-
自定义字体（Web fonts）： 像google Fonts、Adobe Fonts等服务提供了海量的字体选择，你可以找到各种风格的字体来匹配你的品牌。使用
@import
或
<link>
标签引入，然后在CSS中直接使用。
/* 引入Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap'); body { font-family: 'Noto Sans SC', sans-serif; /* 注意中文字体通常需要单独指定或使用支持中文的字体包 */ }当然，你也可以通过
@font-face
规则来引入自托管的字体文件。这给了你最大的自由度，但要注意字体版权和文件大小，过大的字体文件会拖慢页面加载。
字号（
font-size
）的选择同样重要。我通常会避免使用绝对单位
px
作为所有文本的字号，尤其是在响应式设计中。
-
px
(像素)：
精确控制，但对用户缩放页面不友好。适合一些固定尺寸的ui元素。 -
em
(相对于父元素字体大小)：
灵活，但层级嵌套多时容易计算失误。比如父元素是16px，子元素设置font-size: 1.2em
就是19.2px。
-
rem
(相对于根元素字体大小)：
这是我个人最推荐的。它相对于html
元素的
font-size
，避免了
em
的嵌套问题，同时又能很好地支持用户缩放。比如
html { font-size: 16px; }，那么
p { font-size: 1rem; }就是16px。
-
vw
/
vh
(视口宽度/高度百分比)：
适用于需要字体大小随视口变化而变化的场景，比如响应式标题。但过度使用可能会导致在极端屏幕尺寸下字体过大或过小，需要谨慎。
通常我会给
html
元素设置一个基础
font-size
（比如
16px
或
62.5%
，后者能让
1rem
等于
10px
，方便计算），然后其他所有文本都用
rem
。这样，当用户在浏览器设置中调整基础字号时，我的网页也能很好地适应。
除了基础样式，CSS还能如何提升文本的可读性和视觉吸引力？
仅仅改变字体和字号是远远不够的，文本的“气质”往往藏在那些更细微的样式里。
- 行高（
line-height
）：
这是我个人觉得最被低估的属性之一。适当的行高能让文字呼吸，避免行与行之间挤压，大大提升阅读舒适度。通常，我会设置为字体大小的1.5到1.8倍，比如font-size: 16px; line-height: 1.6;
。对于标题，行高可以适当小一些。
- 字重（
font-weight
）：
控制文字的粗细。normal
（400）和
bold
（700）是最常见的。现代字体通常支持从100到900的更多级别。合理运用字重可以创建视觉层次，比如标题用
font-weight: 700;
，正文用
font-weight: 400;
，强调部分用
font-weight: 600;
。
- 文本对齐（
text-align
）：
left
（左对齐，最常见，最自然）、
center
（居中，适合标题、短语）、
right
（右对齐，较少用于大段文本）、
justify
（两端对齐，报纸杂志常用，但可能导致单词间距不均匀，尤其是在窄容器中）。我个人偏爱左对齐，它符合大多数人的阅读习惯。
- 文本装饰（
text-decoration
）：
最常见的是underline
（下划线），通常用于链接。
line-through
（删除线）和
overline
（上划线）也有其用途。注意，不要随意给非链接的文本添加下划线，这会误导用户。你也可以用
none
来移除默认的下划线。
- 字间距（
letter-spacing
）和词间距（
word-spacing
）：
微调这些可以优化文本的视觉密度。有时，默认的字间距会显得文字过于紧凑，稍微增加letter-spacing
（比如
0.2px
到
0.5px
）就能让文字看起来更清爽。对于标题，适当增加字间距能增强其设计感。
- 文本阴影（
text-shadow
）：
可以为文字增加深度和立体感，但要谨慎使用。过重的阴影会让文字难以辨认。我通常用一个轻微的、模糊的阴影来提升标题的质感，比如text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
。
- 文本转换（
text-transform
）：
uppercase
（全部大写）、
lowercase
（全部小写）、
capitalize
（首字母大写）。这在不改变HTML内容的情况下，快速调整文本的大小写非常方便，比如让所有标题自动大写。
这些属性的组合使用，就像一个乐队的各种乐器，需要和谐搭配才能演奏出动听的乐章。
处理文本溢出或长段落时，CSS有哪些实用的技巧？
在响应式设计中，文本溢出是个让人头疼的问题。一个设计得再漂亮的布局，如果文本溢出了容器，那真是灾难性的。好在CSS提供了一些“救星”。
-
white-space
： 这个属性决定了如何处理元素内的空白符。
-
nowrap
：文本不会换行，会在同一行上继续，直到遇到
<br>
标签。这会导致溢出。
-
pre
：保留空白符，并且只在遇到换行符或
<br>
时才换行。
-
pre-wrap
：保留空白符，但会在需要时自动换行。
-
pre-line
：合并空白符，但保留换行符。 对于防止单行文本溢出，
nowrap
经常与
overflow: hidden
和
text-overflow: ellipsis
配合使用。
-
-
overflow
： 当内容超出元素框时，如何处理。
-
hidden
：溢出内容会被裁剪，不可见。
-
scroll
：无论内容是否溢出，都会显示滚动条。
-
：内容溢出时显示滚动条，否则不显示。 对于单行文本溢出，我们通常会设置为
overflow: hidden;
。
-
-
text-overflow
： 配合
overflow: hidden
和
white-space: nowrap
使用，当文本溢出时，显示省略号或自定义字符串。
.single-line-ellipsis { white-space: nowrap; /* 文本不换行 */ overflow: hidden; /* 溢出部分隐藏 */ text-overflow: ellipsis; /* 隐藏部分显示为省略号 */ }这是一个非常常见的技巧，用于处理导航菜单、卡片标题等可能过长的文本。
-
word-break
和
word-wrap
(现在更推荐
overflow-wrap
)：
-
word-break: break-all;
：允许在单词内部的任意字符处换行，这对于处理长串无空格的文本（比如URL或技术代码）非常有用，防止它们撑破布局。
-
word-break: keep-all;
：只在半角空格或连字符处换行。
-
overflow-wrap: break-word;
(旧称
word-wrap
)：允许在长单词或URL内部换行，以防止溢出容器。这是一个更温和的选项，它会尽量保持单词的完整性。
-
-
多行文本溢出省略号： CSS原生支持多行文本溢出省略号的方案稍微复杂一些，通常需要结合
display: -webkit-box;
、
-webkit-line-clamp;
和
-webkit-box-orient: vertical;
这些WebKit私有属性。虽然不是W3C标准，但在主流浏览器中（尤其是移动端）支持度尚可。
.multi-line-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 显示3行文本 */ -webkit-box-orient: vertical; /* 兼容性处理，非WebKit内核浏览器可能需要JS */ }对于非WebKit内核浏览器，可能需要JavaScript来模拟多行省略号的效果，这算是一个小小的技术挑战吧。
处理文本溢出，说白了就是要在美观和信息完整性之间找到一个平衡点。有时候，为了布局的整洁，不得不牺牲一部分内容展示，用省略号来提示用户“这里还有更多”。
评论（已关闭）
评论已关闭