<p>这就是我想要达到的目标，</p> <pre class="brush:php;toolbar:false;">&gt; 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.</pre> <p>html看起来像这样，</p> <pre class="lang-html prettyprint-override"><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></pre> <p>我能想到的一个不太优雅的解决方案是通过display: inline-block;并为细节p留下填充，但这仍然给我留下了文本换行的问题，换行的文本从一行的开头开始。<br /><br />如果可能的话，我正在寻找CSS唯一的解决方案。</p><p><br /></p>

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>