如果希望讓元素寬度自適應內容長度，有許多方法可以達成，以下列舉幾種情況。
display:block 的情況
在沒有指定width的情況下預設是width: auto，其寬度為父元素寬度，以下例來說就是自適應網站的文章寬度。
預設的範例（自動寬度）
小站長
一個喜歡在夜晚默默寫架站內容的路人小站長
<style>
.divA, .divB{
border: 1px solid #555;
margin: 0 0 10px 0;
padding: 5px 10px;
background: #17364c;
background: #0a1b32;
}
</style>
<h3>範例</h3>
<div class="divA">
小站長
</div>
<div class="divB">
一個喜歡在夜晚默默寫架站內容的路人小站長
</div>
假設文字長度是不固定的（例如訪客名稱），而希望寬度隨文字長度而改變可以參考以下做法。
方法一
使用width: fit-content可將寬度縮小到內容的寬度。
範例
訪客名稱：小站長
訪客名稱：一個喜歡在夜晚默默寫架站內容的路人小站長
<style>
.divA2, .divB2{
border: 1px solid #555;
margin: 0 0 10px 0;
padding: 5px 10px;
background: #17364c;
background: #0a1b32;
width: fit-content;
}
</style>
<div class="divA2">
訪客名稱：小站長
</div>
<div class="divB2">
訪客名稱：一個喜歡在夜晚默默寫架站內容的路人小站長
</div>
方法二
使用display: table一樣能達到效果，但對於display須為其他值時則不適用。
範例
訪客名稱：小站長
訪客名稱：一個喜歡在夜晚默默寫架站內容的路人小站長
<style>
.divA2, .divB2{
border: 1px solid #555;
margin: 0 0 10px 0;
padding: 5px 10px;
background: #17364c;
background: #0a1b32;
display: table;
}
</style>
<div class="divA2">
訪客名稱：小站長
</div>
<div class="divB2">
訪客名稱：一個喜歡在夜晚默默寫架站內容的路人小站長
</div>
display:inline-block 的情況
方法一
display:inline本身就會自適應文字大小，而這時候如果希望再控制最大寬度不要超過多少，那麼只需要再加上max-wdith即可。
範例
訪客名稱：小站長
訪客名稱：一個喜歡在夜晚默默寫架站內容的路人小站長
<style>
.divA3, .divB3{
border: 1px solid #555;
margin: 0 0 10px 0;
padding: 5px 10px;
background: #17364c;
background: #0a1b32;
display: inline-block;
max-width:300px;
}
</style>
<h4>範例</h4>
<div class="divA3">
訪客名稱：小站長
</div>
<div class="divB3">
訪客名稱：一個喜歡在夜晚默默寫架站內容的路人小站長
</div>
本文是否對您有幫助？