可以用这种方式定制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>