flex布局实现多行文本“展开/收起”按钮对齐的关键是将按钮与文本同级包裹于一个flex容器中，通过margin-left: auto右对齐、align-self控制垂直位置，并在小屏时用flex-wrap换行左对齐，确保语义绑定、视觉稳定、响应式适配。

用 Flex 布局实现多行文本的「展开/收起」按钮对齐，关键不是只调按钮位置，而是让按钮和它所控制的文本形成语义绑定、视觉对齐、行为一致的单元。常见问题如按钮飘在右上角、换行后错位、小屏下挤出容器，根源在于结构松散 + 对齐逻辑混乱。

把按钮和文本包进同一个 flex 容器

不要把按钮放在文本外部、靠 margin 或 float 推过去。正确做法是：每个可折叠段落单独包裹成一个 flex 容器，内部按顺序放文本内容和按钮。

• HTML 结构示例：
  
  
    

  这是一段很长的描述文字……

  
    展开
  
• 这样按钮和文本天然同级，后续所有对齐（比如右对齐按钮、垂直居中、间距控制）都基于这个容器做，不会受其他段落干扰

按钮右对齐且垂直居中（单行/多行都稳）

给 .text-block 设为 flex 布局，主轴水平，交叉轴居中；再让按钮用 margin-left: auto 推到最右——这是比 justify-content: flex-end 更稳妥的方式，尤其当文本行数变化时不会影响按钮高度定位。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• CSS 示例：
  .text-block { display: flex; flex-direction: column; align-items: flex-start; }
  .excerpt { margin: 0; }
  .toggle-btn { margin-left: auto; align-self: flex-end; }
• 如果想按钮始终和最后一行文本底边平齐，可改用 align-self: baseline，但需确保按钮字体大小与文本一致，否则基线会偏移

响应式下按钮自动下移、避免遮挡

小屏幕文本变宽、行数增加，按钮若还卡在右侧可能盖住文字末尾。此时可借助 flex-wrap + 媒体查询，让按钮在窄屏时换到下一行、左对齐。

• 加一句：
  @media (max-width: 480px) {
    .text-block { flex-direction: row; flex-wrap: wrap; }
    .toggle-btn { margin-left: 0; margin-top: 0.5em; }
  }
• 这样大屏是「文本左 + 按钮右」横向布局，小屏变成「文本占满整行 + 按钮换行左对齐」，清晰不重叠

展开后按钮文字动态切换，保持对齐不变

切换「展开/收起」时，仅改按钮 innerText，不要增删 DOM 或改变宽度。若用不同文字（如“展开”vs“收起”）导致按钮宽度突变，可用 min-width 固定最小宽度，或用等宽字体（如 font-family: monospace）保证视觉稳定。

• 推荐写法：
  .toggle-btn { min-width: 60px; text-align: center; }
• 配合 JS 切换时加过渡：
  .toggle-btn { transition: opacity 0.2s; } 避免文字跳动