標籤(div input)大小隨內容變化

2021-08-07 01:41:33 字數 1072 閱讀 3928

1.div標籤隨內容大小變化

這些黃色矩形框大小得隨內容變化,適應性的

哈哈哈想一下,你會怎麼做?

其實很簡單

沒錯!width:auto;就可以了

咦,好像有點擠,沒事,加個padding: 10px;

.blockcolors

2. 文字框(input,textarea)等的大小隨內容自適應

思路:

為了讓輸入框的大小和內容匹配,我只需要獲取內容顯示需要的長度就可以了,如何獲取呢?

scrollwidth:

物件的實際內容的寬度,不包邊線寬度,會隨物件中內容超過可視區後而變大。

**實現:

type="text">

document.queryselector("input").addeventlistener("input",function

());

script>

一般有最大最小長寬度限制:

中級實現:

附: scrollwidth,clientwidth,offsetwidth的區別

解釋:

scrollwidth:物件的實際內容的寬度,不包邊線寬度,會隨物件中內容超過可視區後而變大。

clientwidth:物件內容的可視區的寬度,不包滾動條等邊線,會隨物件顯示大小的變化而改變。

offsetwidth:物件整體的實際寬度,包滾動條等邊線,會隨物件顯示大小的變化而改變。

實現textarea標籤高度隨內容自動變化

預設情況,textarea標籤的高度是不會隨文字內容自動撐開的,即其高度固定,高度過多時會使textarea標籤出現滾動條 但是有時候會有需求 實現textarea標籤高度隨內容自動變化,那麼可以利用scrollheight屬性實現,如下 html部分 js部分 function makeexpan...

swift UILable 文字大小隨寬度調整

swift uilabel的寬度一般都是固定的,但是文字有時候長有時候短,如何做到文字在超過label寬度之後適當縮小使得現實完全 其實,很多簡單 我們呼叫 adjustsfontsizetofitwidth 即可實現 objc view plain copy let label 1 uilabel...

C Winform 控制項大小隨窗體大小等比例縮放

在from1.cs中輸入如下 public form1 其中settag this 為控制項等比例縮放的方法 region 控制項大小隨窗體大小等比例縮放 private float x 定義當前窗體的寬度 private float y 定義當前窗體的高度 private void settag ...