卡片文字对齐需分层处理：text-align仅控制行内内容水平位置，卡片整体居中用margin:0 auto或Flex；段落缩进用text-indent，间距用margin；p内禁放块级元素；Canvas多行文本须手动测量与分行。
卡片内文字怎么对齐才不乱
卡片里文字错位，90% 是因为混用了 text-align 和 margin/padding，又没理清作用层级。文字对齐只管“内容在容器里的水平位置”，它不管卡片本身在哪，也不管段落之间空多少。
常见错误：给卡片加了 text-align: center，结果里面 p 标签的首行缩进还留着，看起来像偏了；或者用 margin-left: 20px 想“整体右移段落”，结果整段被挤出卡片边界。
-
text-align只影响块级元素（如p、div）内部的**行内内容**水平位置，对卡片容器自身无作用 - 卡片整体居中，该用
margin: 0 auto或 Flex 布局的justify-content: center，不是靠里面文字对齐“带过去” - 中英文混合时，
text-align: justify对中文效果差（字距拉伸不自然），优先选left或start - 要兼容阿拉伯语等 RTL 语言，别硬写
text-align: right，改用text-align: end+dir="rtl"
卡片里段落怎么缩进和分隔才规范
HTML 没有“段落前后缩进”这个属性。所谓“前后”，其实是两个独立控制点：text-indent 控首行，margin-top/margin-bottom 控段间距。把它们叠在一起乱调，卡片内文字就会飘、挤、悬空。
- 中文卡片常用“首行空两格 + 段间留空”：直接用
text-indent: 2em+margin: 1.4em 0，别用px固定值 - 首段不缩进（比如卡片标题下第一段），必须显式重置：
p:first-of-type { text-indent: 0; margin-top: 0; } - 想让整段右退一点（例如避开图标或边框），用
padding-left而非margin-left——前者是内容内缩，不影响卡片布局流；后者可能触发外边距折叠或与父容器 padding 叠加 -
text-indent对display: flex或grid子项无效，这类卡片里段落若嵌在 Flex 容器中，缩进得靠padding-left或伪元素模拟
为什么卡片里 p 套链接会崩排版
这是高频隐形雷：<p><a href="#">文字</a></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 看似合法，但一旦往里加 <div>、<code><h3></h3> 或换行空格，HTML 解析器立刻自动闭合 p，导致结构断裂、样式丢失、点击区域只剩文字。
- 浏览器会把
<p></p> <div>标题</div>解析成<p></p> <div>标题</div>，卡片失去上下margin，视觉上“断层” - 正确做法：卡片整体可点击，就别用
p包裹，改用<div role="link" tabindex="0">，再用 JS 绑定 click 和键盘事件<li>如果必须保留语义化链接且含图文，把 <code>p换成div，链接用<a></a>包纯文本或<span></span>，标题改用<h3></h3>并脱离段落流 - 任何块级标签（
div、h3、ul）都不能出现在p内部，W3C 标准明确禁止 - 先用
ctx.measureText()测每行宽度，英文按空格切，中文逐字符切（优先在，。！？后断），混合文本建议先按 Unicode 范围分块再拼 - 统一设
ctx.textAlign = 'start'（比left更安全，适配 RTL），所有行共用同一个x坐标，才能真正对齐 - 行距不能硬写
20，要用fontSize * 1.3计算，否则字号变大时行间粘连 - 调试时加一条
ctx.strokeStyle = 'red'; ctx.beginPath(); ctx.moveTo(x-10, y); ctx.lineTo(x+10, y); ctx.stroke();画参考线，一眼看出锚点是否对齐
Canvas 卡片文本对齐要手动算，别指望自动
Canvas 没有 CSS 那套对齐逻辑，textAlign 只是单行锚点，多行文本必须自己拆、测、画。直接 fillText(str, x, y) 丢一长串进去，结果一定是右半截消失或堆成一团。
最易被忽略的是：Canvas 文本对齐和 HTML 排版是两套系统，不能互相类比；而 HTML 卡片里混用 p 和块级标签，表面正常，实则 DOM 已被浏览器悄悄修正——你看到的“对齐”，可能是解析器兜底后的巧合，不是你写的代码真起了作用。
