P粉300541798 2023-08-02 18:34:52 0 1 262
这就是我想要达到的目标，
> Variable Length Title: A sentence worth of text that may or may
not wrap depending upon the width of the
container.
This is the text that is not in the
summary tag but still is in the details
tag therefore hidden unless clicked on.
html看起来像这样，
<details>
<summary>
<span class="left">Variable Length Title:</span>
<span class="right">
A sentence worth of text that may or may
not wrap depending upon the width of the
container.
</span>
</summary>
<p>
This is the text that is not in the
summary tag but still is in the details
tag therefore hidden unless clicked on.
</p>
</details>
我能想到的一个不太优雅的解决方案是通过display: inline-block;并为细节p留下填充，但这仍然给我留下了文本换行的问题，换行的文本从一行的开头开始。
如果可能的话，我正在寻找CSS唯一的解决方案。
P粉710454910 采纳为最佳 2023-08-03 16:12:52 1楼
如果你被允许稍微改变一下HTML，你可以这样做:
将标题复制为<p>的前一个同级。
隐藏它，但保持它的宽度使用可见性:hidden;
将重复的标题和段落用<div>包起来。
利用网格。
删除标记。
summary, div { display: grid; grid-template-columns: auto 1fr; } .visibility-hidden { visibility: hidden; } /* Hide marker */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }<details> <summary> <span class="left">Variable Length Title:</span> <span class="right"> A sentence worth of text that may or may not wrap depending upon the width of the container. </span> </summary> <div> <span class="visibility-hidden">Variable Length Title:</span> <p> This is the text that is not in the summary tag but still is in the details tag therefore hidden unless clicked on. </p> </div> </details> 赞 +0 添加回复