可以用这种方式定制HTML细节标记的样式吗?

Question

这就是我想要达到的目标，

> 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看起来像这样，

<code>&lt;details&gt;
  &lt;summary&gt;
    &lt;span class="left"&gt;Variable Length Title:&lt;/span&gt;
    &lt;span class="right"&gt;
      A sentence worth of text that may or may
      not wrap depending upon the width of the
      container.
    &lt;/span&gt;
  &lt;/summary&gt;
  &lt;p&gt;
    This is the text that is not in the
    summary tag but still is in the details
    tag therefore hidden unless clicked on.
  &lt;/p&gt;
&lt;/details&gt;
</code>

我能想到的一个不太优雅的解决方案是通过display: inline-block;并为细节p留下填充，但这仍然给我留下了文本换行的问题，换行的文本从一行的开头开始。

如果可能的话，我正在寻找CSS唯一的解决方案。

Answer 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>