怎么在HTML中使details标签的文字在折叠时显示省略号-html教程-PHP中文网

summary需设为块级元素并满足四条件（明确宽度、white-space: nowrap、overflow: hidden、text-overflow: ellipsis）才生效；避免嵌套交互元素、图标或使用::marker，flex布局下父容器须加min-width: 0。

怎么在html中使details标签的文字在折叠时显示省略号

details折叠状态下summary文字怎么加省略号

直接给summary加text-overflow: ellipsis基本无效——它默认是display: list-item，不满足省略号生效的四个硬性条件，且内部触发区域和伪元素干扰严重。

summary必须转成块级容器再设宽

省略号只在块级、有明确宽度、强制不换行、隐藏溢出的组合下才工作。而summary原生不是块级，也不能靠white-space: nowrap单靠自身撑开宽度。

给summary加display: block或inline-block
必须设置width或max-width（百分比在flex中可能失效，建议用px或ch）
加上white-space: nowrap和overflow: hidden
最后才是text-overflow: ellipsis

示例CSS：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

summary {
  display: block;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

别碰::marker，也别用button包裹

很多人想在summary里放图标或按钮来“辅助点击”，结果反而破坏了省略号逻辑：button会劫持事件，::marker在Safari旧版里不渲染，且它的存在会影响summary的盒模型计算。

自定义箭头统一用summary::before，并确保summary内没有button、a等交互元素
如果用了list-style: none或summary::marker { display: none }，要确认没连带把点击热区干掉（某些Android WebView会这样）
移动端热区小？给summary加padding，但padding不能吃掉文字宽度——否则省略号位置偏移