可以用這種方式自訂HTML細節標記的樣式嗎?

Question

<p>這就是我想要達到的目標，</p>

>>可變長度標題：一個句子的文本，可能或可能
                            不包裹取決於寬度
                            容器。

                            這是文中沒有的文字
                            摘要標籤但仍在細節中
                            因此，除非單擊，否則標記將被隱藏。</pre>
<p>html 看起來像這樣，</p>
<pre class="lang-html Prettyprint-override"><代碼><詳情>
  <總結>
    可變長度標題：
    <span class="right">
      一個句子的文本價值可能或可能
      不包裹取決於寬度
      容器。
    </span>
  </摘要>
  <p>
    這是文中沒有的文字
    摘要標籤但仍在細節中
    因此，除非單擊，否則標籤將被隱藏。
  </p>
</詳情>
</代號></pre>
<p>我能想到的一個不太慢的解決方案是通過display: inline-block;並為細節p留下填充，但仍然給我留下了文本換行的問題，從一行中換行的文本< ;br/><br/>>如果可能的話，我正在尋找CSS唯一的解決方案。</p><p><br/></p>

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>

#