不合适。<address>仅用于作者/文档联系信息，滥用会导致语义错误和样式干扰；应改用<p>或<div>+语义类名，并通过word-break、white-space等CSS控制换行与缩进。
地址信息用 <address> 标签是否合适？
不合适。<address> 是语义化标签，只用于表示“作者/文档联系信息”，不是通用地址容器。浏览器默认会加斜体、上下外边距，且 SEO 和屏幕阅读器会按“联系人”理解它。实际排版中滥用会导致语义错误和样式干扰。
- 正确场景：页脚的网站运营方邮箱、电话；文章末尾的作者联系方式
- 错误场景：商品收货地址、门店地址、物流面单信息
- 替代方案：用
<p>或<div>+ 语义类名（如class="address-line"）更可控
如何让地址文字自动换行又不破坏结构？
地址常含长字符串（如门牌号带括号、英文街道名），纯靠空格换行不可靠。关键在控制 word-break 和 white-space 行为：
.address {
word-break: break-word; /* 允许长单词内断行（如 "No.123456789"） */
white-space: pre-line; /* 保留换行符，合并多余空白，正常换行 */
}-
break-word比break-all更友好——只在必要时切单词，不强行拆“China”成“Chi-na” -
pre-line能识别\n换行（比如后端返回带换行的地址字符串），同时忽略 HTML 中多余的空格和制表符 - 避免用
white-space: pre，否则缩进空格会原样显示，破坏响应式布局
中文地址缩进怎么处理才不踩坑？
中文地址常用“首行缩进 2 字符”模拟传统排版，但直接用 text-indent: 2em 会把第一行所有内容（包括省市区）一起缩进，逻辑上不合理。更稳妥的是分段控制：
<p class="address"> <span class="address-province">广东省</span><br> <span class="address-city">深圳市</span><br> <span class="address-district">南山区</span><br> <span class="address-street">科技南路1001号腾讯大厦B座</span> </p>
- 每级用
<span>包裹，配合<br>实现明确换行点 - 对
.address-street单独加text-indent: 2em，只缩进最后一行详细地址 - 若需响应式缩进（小屏取消缩进），用媒体查询：
@media (max-width: 480px) { .address-street { text-indent: 0; } }
用 CSS Grid / Flex 布局排地址是否更可靠？
是，尤其当地址字段来自结构化数据（如 API 返回的 province、city、street 字段）。Grid 可避免 <br> 的语义污染，也方便对齐和间距控制：
立即学习“前端免费学习笔记（深入）”；
.address-grid {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 0.5em;
}
.address-grid > span:first-child {
font-weight: bold; /* 省/市等标签加粗 */
}
.address-grid > span:last-child {
text-indent: 2em;
}- 适合后台返回 JSON 如
{ "province": "广东省", "street": "科技南路1001号..." } - 注意
max-content列宽会随文字长度变化，若需固定标签宽度（如统一“省：”“市：”），改用fit-content(60px)或具体像素值 - Flex 不推荐用于多行地址——
flex-wrap: wrap对换行位置不可控，容易把“深圳市南山区”拆到两行
实际项目里最容易被忽略的，是地址字符串里混入全角空格、不间断空格（ ）或零宽空格。这些字符会让 white-space: pre-line 失效，或导致换行异常。上线前务必用 console.log(JSON.stringify(address)) 检查原始字符串。
