Est-il possible de personnaliser le style des balises de détail HTML de cette manière ?

Question

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

> Titre de longueur variable : une phrase de texte qui peut ou peut
                            ne pas envelopper en fonction de la largeur du
                            récipient.

                            C'est le texte qui n'est pas dans le
                            balise récapitulative mais est toujours dans les détails
                            la balise est donc masquée sauf si vous cliquez dessus.

html看起来像这样，

<code><détails>
  <résumé>
    <span class="left">Titre à longueur variable :</span>
    <span class="right">
      Une phrase valant un texte qui peut ou peut
      ne pas envelopper en fonction de la largeur du
      récipient.
    </envergure>
  </résumé>
  <p>
    C'est le texte qui n'est pas dans le
    balise récapitulative mais est toujours dans les détails
    balise donc masquée sauf si on clique dessus.
  </p>
</détails>
</code>

了文本换行的问题，换行的文本从一行的开头开始 。

t ;

Answer 1

Si vous étiez autorisé à modifier un peu le HTML, vous pourriez faire ceci :

Copiez le titre comme le frère précédent de <p>.
Cachez-le mais conservez sa largeur en utilisant visible:hidden;
Enveloppez les titres et paragraphes répétés avec <div>.
Utilisez la grille.
Supprimer la marque.

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>