Is it possible to customize the style of HTML detail tags in this way?

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><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>
</code>

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

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

Answer 1

If you were allowed to change the HTML a little, you could do this:

Copy the title to the previous sibling of <p>.
Hide it but keep its width using visibility:hidden;
Wrap repeated headings and paragraphs with <div>.
Use the grid.
Delete mark.

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>