Adakah mungkin untuk menyesuaikan gaya teg butiran HTML dengan cara ini?

Question

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

> Tajuk Panjang Pembolehubah: Teks bernilai ayat yang mungkin atau mungkin
                            tidak membalut bergantung pada lebar
                            bekas.

                            Ini adalah teks yang tiada dalam
                            tag ringkasan tetapi masih terdapat dalam butiran
                            oleh itu teg disembunyikan melainkan diklik.

html看起来像这样，

<kod><perincian>
  <ringkasan>
    <span class="left">Tajuk Panjang Boleh Ubah:</span>
    <span class="right">
      Teks bernilai ayat yang mungkin atau mungkin
      tidak membalut bergantung pada lebar
      bekas.
    </span>
  </ringkasan>
  <p>
    Ini adalah teks yang tiada dalam
    tag ringkasan tetapi masih terdapat dalam butiran
    tag oleh itu disembunyikan melainkan diklik.
  </p>
</details>
</code>

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

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

Answer 1

Jika anda dibenarkan menukar sedikit HTML, anda boleh melakukan ini:

Salin tajuk sebagai adik beradik sebelumnya <p>.
Sembunyikan tetapi kekalkan lebarnya menggunakan visibility:hidden
Balut tajuk dan perenggan berulang dengan <div>.
Gunakan grid.
Alih keluar tanda.

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>