26、web前端开发之CSS3（三）

5. 文本（Text）

CSS3大大增强了对文本样式和排版的控制，使得网页设计更加灵活和多样化。本讲详细介绍CSS3中常用的文本相关属性，包括文本对齐、字体大小、行高、字母间距、单词拆分、溢出隐藏等，帮助开发者更好地控制和优化网页中的文本显示效果。

5.1. 文本对齐（text-align）

text-align属性用于控制块级元素（如div、p等）中的文本水平排列方式。通过合理使用text-align，可以实现文本的左对齐、右对齐、居中对齐以及两端对齐。

属性值：

• start：将文本对齐到容器的开始边（通常是左边）。
• end：将文本对齐到容器的结束边（通常是右边）。
• left：将文本对齐到容器的左边。
• right：将文本对齐到容器的右边。
• center：将文本居中对齐。
• justify：将文本对齐到容器的两端，调整空格以填充容器宽度。
• match-parent：将文本对齐方式与父容器相同。

示例：

.text-align-center {
   
     
    text-align: center;  
}  

效果： 文本居中对齐。

5.2. 文本变换（text-transform）

text-transform属性用于控制文本的大小写显示方式，通过改变字母的大小写可以增强文本的视觉效果，尤其适用于标题和按钮设计。

属性值：

• none：不改变文本的大小写。
• uppercase：将所有字母转换为大写。
• lowercase：将所有字母转换为小写。
• capitalize：将每个单词的首字母转换为大写，其余字母小写。
• inherit：继承父容器的text-transform属性值。

示例：

.title {
   
     
    text-transform: uppercase;  
}  

效果： 将所有字母转换为大写。

5.3. 字体大小（font-size）

font-size属性用于设置文本的字号大小，可以精确控制字体在屏幕上的显示尺寸。

属性值：

• 绝对单位：
  • px（像素）：基于屏幕像素的绝对测量。
  • pt（点）：1点=1/72英寸，主要用于打印。
  • pc（派卡）：1派卡=12点。
• 相对单位：
  • em：相对于父元素的font-size。
  • rem：相对于根元素的font-size。
  • %：相对于父元素的font-size。

示例：

.main-content {
   
     
    font-size: 1.5rem;  
}  

效果： 将文本字号设置为根元素字号的1.5倍。

注意事项：

• 使用rem单位可以更好地实现响应式设计，因为它基于根元素的字号，可以通过调整根字号来统一改变页面的字体大小。
• 使用相对单位比绝对单位更具灵活性，尤其是在需要适应不同屏幕尺寸的情况下。

5.4. 行高（line-height）

line-height属性用于设置文本行与行之间的距离，可以有效控制多行文本的间距，提升可读性。

属性值：

• 数值：可以是具体的数值，表示为line-height: <number>，数值越大，行距越大。
• 单位：可以是绝对单位（如px）或相对单位（如em）。
• normal：根据浏览器的默认行距。
• inherit：继承父容器的行距。

示例：

.paragraph {
   
     
    line-height: 1.6;  
}  

效果： 行距设置为字号的1.6倍。

最佳实践：

• 使用无单位的数值（如1.6）进行设置，这样数值会基于当前字体的font-size自动计算，确保行距与字号成比例。
• 建议将line-height设置为1.2到1.6之间的值，以保证文本的可读性。

---

5.5. 字母间距（letter-spacing）

letter-spacing属性用于控制字母之间的间隙，通过调整间距可以实现更美观的排版效果，尤其在需要紧凑或松散的文本显示时非常有用。

属性值：

• <length>：可以是具体的长度值，如2px、0.1em等。
• normal：使用浏览器的默认字母间距。
• inherit：继承父容器的字母间距。

示例：

.tight-text {
   
     
    letter-spacing: -2px;  
}  

效果： 将字母之间的间隙减小2像素，实现紧凑的文本显示。

注意事项：

• 负值可以减少字母之间的间隙，正值则增加间隙。
• 过度调整letter-spacing可能会影响文本的可读性，应在视觉效果与可读性之间找到平衡。

---

5.6. 单词拆分（word-break）

word-break属性用于控制如何在单词之间进行断行，主要用于处理较长的单词或中文、日文等语言的文本排版。

属性值：

• normal：根据浏览器的默认断行规则。
• break-all：允许在单词内部断行，所有的非CJK（中日韩）文本都可以被断开。
• keep-all：仅允许在CJK文本的单词之间断行，非CJK文本不能被断开。
• inherit：继承父容器的断行规则。

示例：

.break-word {
   
     
    word-break: break-all;  
}  

效果： 允许在单词内部断行，确保内容在容器内完全显示。

---

5.7. 溢出隐藏（text-overflow）

text-overflow属性用于控制当文本内容超过容器的显示区域时的显示方式。结合white-space和overflow属性，可以实现省略号的显示效果。

属性值：

• clip：直接截断多余的文本，不显示省略号。
• ellipsis：在文本末尾显示省略号，表示内容被截断。
• string：可以指定一个字符串来替代截断的部分（此值在现代浏览器中支持有限）。
• inherit：继承父容器的溢出显示方式。

示例：

.ellipsis-text {
   
     
    text-overflow: ellipsis;  
    white-space: nowrap;  
    overflow: hidden;  
}  

效果： 当文本内容超过容器的显示区域时，末尾显示省略号“…”。

---

5.8. CSS3文本的实际应用

通过合理使用上述文本属性，可以实现多种创意设计，提升网页内容的可读性和视觉效果。以下是一些常见的实际应用场景：

1. 响应式排版

@media (max-width: 768px) {
   
     
    .content {
   
     
        font-size: 1rem;  
        line-height: 1.4;  
    }  
}  

效果： 在移动设备上调整字号和行距，确保文本的可读性和美观。

2. 标题样式

.title {
   
     
    text-transform: uppercase;  
    letter-spacing: 2px;  
    font-size: 2rem;  
}  

效果： 将标题转换为大写，增加字母间距，提升标题的视觉冲击力。

3. 文本溢出处理

.text-preview {
   
     
    display: inline-block;  
    width: 200px;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;