up
down
Close
架站盒子
Web Development Box
 

CSS 寬度隨文字內容長度而改變

│ 5451 Views │ CSS
CSS 寬度隨文字內容長度而改變
CSS 寬度隨文字內容長度而改變
  1. display:block 的情況
    1. 方法一 width: fit-content
    2. 方法二 display: table
  2. display:inline-block 的情況
    1. 方法一 max-width

如果希望讓元素寬度自適應內容長度,有許多方法可以達成,以下列舉幾種情況。

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>

延伸閱讀

本文是否對您有幫助?