Ist es möglich, den Stil von HTML-Detail-Tags auf diese Weise anzupassen?

Question

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

> Titel mit variabler Länge: Ein Satz mit Text, der möglicherweise oder darf
                            nicht umwickeln, abhängig von der Breite des
                            Container.

                            Dies ist der Text, der nicht im
                            Zusammenfassungs-Tag, steckt aber immer noch in den Details
                            Das Tag wird daher ausgeblendet, sofern nicht darauf geklickt wird.

html看起来像这样，

<code><details>
  <Zusammenfassung>
    <span class="left">Titel mit variabler Länge:</span>
    <span class="right">
      Ein Satz im Wert von Text, der vielleicht oder vielleicht
      nicht umwickeln, abhängig von der Breite des
      Container.
    </span>
  </summary>
  <p>
    Dies ist der Text, der nicht im
    Zusammenfassungs-Tag, steckt aber immer noch in den Details
    Tag daher ausgeblendet, sofern nicht darauf geklickt wird.
  </p>
</details>
</code>

了文本换行的问题,换行的文本从一行的开头开始.

如果可能的话,我正在寻找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>