css HTML的细节标签有可能像这样样式吗？

yv5phkfx 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(99)

这是我努力的目标

> Variable Length Title:    A sentence worth of text that may or may
                            not wrap depending upon the width of the
                            container.

                            This is the text that is not in the
                            summary tag but still is in the details
                            tag therefore hidden unless clicked on.

字符串
html看起来像

<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>
  <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>
</details>

型
我能想到的一个不太好的解决方案是将.left的宽度设置为display: inline-block;，并为details p设置左填充，但这仍然给我留下了文本换行的问题，换行的文本从行的开头开始。
如果可能的话，我正在寻找CSS的唯一解决方案。

css

来源：https://stackoverflow.com/questions/76825376/is-it-possible-to-style-htmls-details-tag-like-this

2条答案

按热度按时间

whlutmcx1#

如果你可以稍微修改HTML，你可以这样做：

将标题复制为<p>的前一个同级文件。
使用visibility: hidden;隐藏它但保持它的宽度。
将重复的标题和段落用<div> Package 起来。
利用网格。
移除标记。

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;
}

个字符

赞(0）回复(0）举报 2023-08-09

qij5mzcb2#

details{
position:relative;
margin-bottom:10px;
}
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  position:relative;
  left:0;
  width:300px;
}

details > div {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
  position:absolute;
  top:0;
  left:330px;
}

个字符
好的！在使用详细信息>摘要时必须非常小心。如果你正在使用大规模的应用程序，那么我建议你使用标签/ accordion /折叠。
下面是CSS代码：

details{
position:relative;
margin-bottom:10px;
}
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  position:relative;
  left:0;
  width:300px;
}

details > div {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
  position:absolute;
  top:0;
  left:330px;
}

型
下面是更新后的HTML代码：

<details>
  <summary>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

<details>
  <summary>Featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

型

赞(0）回复(0）举报 2023-08-09

我来回答

css HTML的细节标签有可能像这样样式吗？

2条答案

相关问题

热门标签

最新问答