CSS DEVELOPMENT LAB · 07

文本溢出与长内容处理

真实项目中的文字长度永远不完全可控。标题可能过长、URL 可能连续不换行、 英文可能没有空格。本实验集中研究如何让文字“可控地溢出”，而不是把布局直接撑坏。

COMMON PROBLEMS

六种最常见的文本问题

不同问题需要不同策略。单行省略、多行截断、强制换行和长 URL 处理不能混为一谈。

01

单行标题省略

这是一条非常非常长的产品标题，用来测试单行文本在容器宽度不足时如何自动显示省略号

white-space + overflow + text-overflow
02

两行标题截断

这是一条用于产品卡片或新闻列表的长标题。我们希望最多显示两行，超出部分截断， 同时保持卡片高度更加稳定，不因为不同标题长度出现明显错位。

line-clamp
03

长英文单词

supercalifragilisticexpialidocioussupercalifragilisticexpialidocious

overflow-wrap: anywhere
04

超长 URL

https://example.com/products/composite-decking/ultra-long-category-name/technical-documents/download-center/specification-2026-final-version.pdf

overflow-wrap
05

中文长段落

中文本身通常可以自然换行，但在窄容器、混合数字、型号、英文缩写以及标点较多的情况下， 仍然需要检查实际换行效果，尤其是在产品参数和移动端卡片中。

normal wrapping
06

Flex 子项被文字撑宽

A
This-is-a-very-long-flex-item-title-that-can-break-layout-without-min-width-zero 关键是给可伸缩子项设置 min-width: 0。
min-width: 0

WHEN TO USE WHAT

截断和换行是两类问题

“内容太长”并不代表一定要省略。标题卡片可以截断，但产品参数、网址、技术说明通常更适合换行完整展示。

需要保持高度统一 ellipsis / line-clamp
内容必须完整展示 overflow-wrap / word-break
Flex / Grid 被撑破 先检查 min-width: 0

PRACTICAL EXAMPLE

真实产品列表中的组合用法

超长产品名称：新一代户外共挤木塑复合地板系统 Professional Series 2026 Outdoor Composite Decking

这是一段较长的产品描述。列表页面通常不需要把完整介绍全部显示出来， 但又不能只显示一行，因此可以限制为三行，同时把完整内容保留到详情页。

https://example.com/product/professional-series-2026-outdoor-composite-decking