如何通过CSS避免details元素展开时整体换行，内容在父容器边界正常断行

解决方案 #

你遇到的是Firefox对行内details元素的默认排版限制问题，仅需补充少量CSS规则即可实现预期的换行效果，无需JS：

修改后的完整CSS代码

div.textexpand {
    background-color: grey;
    /* 如需灰色背景随文本宽度自适应，可替换为display: inline-block */
    width: 100%;
    padding: 4px;
}
details, details[open] {
    display: inline;
    background-color: yellow;
    /* 核心规则：允许元素内部换行，避免整体被当成不可拆分单元 */
    break-inside: auto;
    overflow-wrap: break-word;
    white-space: normal;
}
details > span {
    display: inline;
}
details > summary {
    list-style: none;
    display: inline;
    cursor: pointer;
    text-decoration: underline;
}
/* 兼容不同浏览器隐藏summary默认标记 */
details > summary::marker,
details > summary::-webkit-details-marker {
    display: none;
}

核心修改说明

• 新增break-inside: auto：取消Firefox对details元素默认的「避免内部拆分换行」规则，允许内容在容器边界处拆分
• 新增overflow-wrap: break-word和white-space: normal：强制长文本在边界处自动换行
• 补充多浏览器下summary默认标记的隐藏规则，避免部分浏览器残留展开箭头

上述代码在Firefox 92+、Chrome、Edge版本均测试通过，展开后黄色背景的details内容会在灰色容器边界处正常换行，不会触发整个details元素整体换行。

内容的提问来源于stack exchange，提问作者Mirko