css 多行详细信息摘要强制摘要：：标记位于文本上方

我使用details来使内容部分可折叠。我已经将summary h3设置为display: inline-block;，因此标记与标题一致。
不幸的是，当标题换行到多行时，标记会跳到标题上方。
如何确保即使是多行摘要也有合理的标记位置？

summary h3 {
  display: inline-block;
}

<details>
  <summary>
    <h3>Short line</h3>
  </summary>
</details>

<details>
  <summary>
    <h3>Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place.</h3>
  </summary>
</details>

<details>
  <summary>
    <h3>Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place. Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place. Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place.</h3>
  </summary>
</details>

稍微做个造型就可以了。关闭标准的列表标记，添加你自己的伪元素，然后使整个东西成为一个flexbox。
请注意，虽然技术上允许将<h3>放入<summary>中，但我更喜欢保持简单。

body {
  font-family: sans-serif;
}
details {
  margin: 1em 0;
}
summary {
  list-style: none;
  display: flex;
  gap: 0.5em;
  margin-bottom: 0.5em;
  align-items: start;
  cursor: pointer;
  color: #880000;
}
summary::before {
  content: '▶︎';
  width: 1em;
  flex-shrink: 0;
  transition: 0.3s;
}
details[open] > summary::before {
  transform: rotate(90deg);
  transform-origin: 40% 45% 0;
}

<details>
  <summary>Short line</summary>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus faucibus erat porta blandit. Etiam eget eleifend sapien, nec tincidunt justo. Cras laoreet lacinia leo vel aliquet. Mauris sed magna rhoncus, semper ante non, consequat odio. Donec consequat elementum purus, et sagittis magna tempus at. Fusce laoreet, ex nec consequat fringilla, lectus ligula dignissim urna, id dictum mauris ante id sem. Vivamus feugiat mattis nunc. Donec cursus sit amet libero nec pretium. Maecenas accumsan ornare euismod. Fusce pellentesque erat arcu, dictum vehicula est sollicitudin at. Praesent commodo efficitur odio eget lacinia. Maecenas mattis ante id ex volutpat, sit amet ultricies ex tempor. Sed eu consequat erat.
  </p>
</details>

<details>
  <summary>
    Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place.
  </summary>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus faucibus erat porta blandit. Etiam eget eleifend sapien, nec tincidunt justo. Cras laoreet lacinia leo vel aliquet. Mauris sed magna rhoncus, semper ante non, consequat odio. Donec consequat elementum purus, et sagittis magna tempus at. Fusce laoreet, ex nec consequat fringilla, lectus ligula dignissim urna, id dictum mauris ante id sem. Vivamus feugiat mattis nunc. Donec cursus sit amet libero nec pretium. Maecenas accumsan ornare euismod. Fusce pellentesque erat arcu, dictum vehicula est sollicitudin at. Praesent commodo efficitur odio eget lacinia. Maecenas mattis ante id ex volutpat, sit amet ultricies ex tempor. Sed eu consequat erat.
  </p>
</details>

<details>
  <summary>
    Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place. Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place. Wow very long line, I hope this wraps sensibly and keeps the arrow in a good place.
  </summary>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus faucibus erat porta blandit. Etiam eget eleifend sapien, nec tincidunt justo. Cras laoreet lacinia leo vel aliquet. Mauris sed magna rhoncus, semper ante non, consequat odio. Donec consequat elementum purus, et sagittis magna tempus at. Fusce laoreet, ex nec consequat fringilla, lectus ligula dignissim urna, id dictum mauris ante id sem. Vivamus feugiat mattis nunc. Donec cursus sit amet libero nec pretium. Maecenas accumsan ornare euismod. Fusce pellentesque erat arcu, dictum vehicula est sollicitudin at. Praesent commodo efficitur odio eget lacinia. Maecenas mattis ante id ex volutpat, sit amet ultricies ex tempor. Sed eu consequat erat.
  </p>
</details>

css 多行详细信息摘要强制摘要：：标记位于文本上方

1条答案

相关问题

热门标签

最新问答