iT邦幫忙

0

HTML的<details>寬度設定

html details summary css
YC 2024-03-29 17:43:24 ‧ 1853 瀏覽

  • 分享至 

  • xImage

請問：
HTML如何讓<details>的寬度等於<summary>和內文的最大值？

如下：

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

沒打開時，<details>寬度等於<summary>
summary
打開時，<details>寬度等於內文
內文

我想讓<details>沒打開時，寬度等於max(內文, <summary>)

範例來源：MDN
其他相似問題解答：
Details element, fit to content whilst inside a flex box, even when collapsed

com iT邦新手 4 級 ‧ 2024-03-30 16:15:21 檢舉
我是預設先打開，用JAVASCRIPT先抓整個寬度，再用JAVASCRIPT關起來，並設定summary寬度，但是我覺得不是好方法，看看有沒有其他人回答好作法
davidchen0117 iT邦新手 4 級 ‧ 2025-05-15 10:44:03 檢舉
<style>
details {
display: inline-block;
width: fit-content;
max-width: 100%; /* 避免超出父層 */
border: 1px solid #ccc;
padding: 4px;
background: #f9f9f9;
}
</style>

<details>
<summary>點我展開</summary>
<div>這是內文，可能會比 summary 長一些。</div>
</details>
登入發表討論
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
犬千賀
iT邦新手 3 級 ‧ 2024-04-01 13:26:32

想先確定你知道MDN範例有包一個外層width: fit-content;，才會看似等於<summary>寬
<details> 預設是 display:block; 一般會等於父層寬 width: 100%

通常使用會直接給max-width直接限制，但如果你堅持要完全適應內文寬度
這裡有幾個範例，各有優缺

  1. 在<summay>塞假content
  2. 用js抓content寬
  3. 結合1,2 用js抓content塞到<summay>

供參 JSBIN

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19850 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙