Multi-line details summary forces summary::marker above text

Question

I'm using details to make content sections collapsible. I've set the summary h3 to be display: inline-block; so the marker is in line with the header.

Unfortunately, when the title wraps to multiple lines, the marker jumps to above the header.

How can I ensure that even multi-line summaries have a sensible marker placement?

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>

Use `inline` instead of that fits within your desired result; or make the `summary` a flex container, so that you can align the marker to one side, and the h3 to the other. — CBroe, Jun 21 '23 at 14:18

Brett Donald · Accepted Answer · 2023-06-22T06:01:32.843

A bit of styling will fix it. Turn off the standard list markers, add your own with a pseudo element, then make the whole thing a flexbox.

Note that while you are technically allowed to put an <h3> inside a <summary>, I prefer to keep it simple.

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>

Multi-line details summary forces summary::marker above text

1 Answers1