この方法で HTML 詳細タグのスタイルをカスタマイズすることはできますか?

Question

<p>これは我想要到到達的目标、</p> <pre class="brush:php;toolbar:false;">>可変長のタイトル: 1 文分のテキスト。 幅によっては折り返さない 容器。 これは本文に載っていない文章です 概要タグはまだ詳細にあります したがって、タグはクリックしない限り非表示になります。</pre> <p>html見る起来像、</p> <pre class="lang-html prettyprint-override"><code><details> ＜概要＞ <span class="left">可変長タイトル:</span> <span class="right"> 文に相当するテキスト 幅によっては折り返さない 容器。 </span> </概要> <p> これは本文に載っていない文章です 概要タグはまだ詳細にあります したがって、タグはクリックしない限り非表示になります。 </p> </詳細> </code></pre> <p>我能が想う不太優雅の解決策は、display: inline-block; を介して、细节pα下に充填されていますが、これは、私が実行する文本换行の问题、换行の文本から

可能な限り、CSS 独自の解決策を検討中です。

Answer 1

HTML を少し変更できる場合は、次のようにすることができます:

タイトルを <p> の前の兄弟にコピーします。
visibility:hidden を使用して非表示にしますが、幅は維持します;
繰り返しの見出しと段落を <div> で囲みます。
グリッドを使用します。
マークを削除します。

リーリー リーリー