<input> 寬度自適應(yīng)變化

levy9527 發(fā)布于2019-08-30 10:50 / 2845人閱讀

摘要：要實(shí)現(xiàn)上述的效果輸入框的寬度隨著輸入的文字長(zhǎng)度變化。而這個(gè)標(biāo)簽有自己的想法，如果沒(méi)有給它設(shè)置一個(gè)固定的寬度，它就會(huì)有一個(gè)默認(rèn)的不變的寬度，想讓它動(dòng)態(tài)伸展是不可能。

要實(shí)現(xiàn)上述的效果：輸入框的寬度隨著輸入的文字長(zhǎng)度變化。而這個(gè)標(biāo)簽有自己的想法，如果沒(méi)有給它設(shè)置一個(gè)固定的寬度，它就會(huì)有一個(gè)默認(rèn)的不變的寬度，想讓它動(dòng)態(tài)伸展是不可能。那怎么辦呢？

那就設(shè)置它的寬高都為100%，讓它隨著父元素改變，那父元素的寬高如何確定呢？給個(gè)標(biāo)簽來(lái)?yè)纹饋?lái)，的寬高就可以根據(jù)它內(nèi)部的內(nèi)容來(lái)動(dòng)態(tài)改變寬高啦，它內(nèi)部的內(nèi)容當(dāng)然就是與輸入的內(nèi)容同步了，把標(biāo)簽隱藏在標(biāo)簽下面，暗搓搓地操控全局。


    {{ inputValue }}
    


...

 .add-tag {
    color: #333;
    border-style: dashed;
    padding: 0;
    position: relative;

    span {
        display: inline-block;
        min-width: 184px;
        height: 100%;
        padding: 0 32px;
    }

    input {
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 28px;
        caret-color: #426BF2;
        ::-webkit-input-placeholder {
            color: #aaa;
        }
        border-radius: 40px;
        border-style: none;
        padding: 0 32px;
    }
}

云服務(wù)器 GPU云服務(wù)器自適應(yīng)寬度寬度自適應(yīng) 自適應(yīng)寬度按鈕 rem寬度自適應(yīng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114599.html

相關(guān)文章

<input> 寬度自適應(yīng)變化

摘要：要實(shí)現(xiàn)上述的效果輸入框的寬度隨著輸入的文字長(zhǎng)度變化。而這個(gè)標(biāo)簽有自己的想法，如果沒(méi)有給它設(shè)置一個(gè)固定的寬度，它就會(huì)有一個(gè)默認(rèn)的不變的寬度，想讓它動(dòng)態(tài)伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要實(shí)現(xiàn)上述的效果：輸入框的寬度隨著輸入的文字長(zhǎng)度變化。而這個(gè)標(biāo)簽有自己的想法，如果沒(méi)有給它設(shè)置一個(gè)固定的寬度...

wangbjun 2019-08-02 16:17 評(píng)論0 收藏0
<<CSS揭秘>>：自適應(yīng)的橢圓

摘要：自適應(yīng)的橢圓利用生成橢圓。參考手冊(cè)橢圓對(duì)一個(gè)寬度和高度不同的容器進(jìn)行如下設(shè)置，就得到一個(gè)橢圓半橢圓是一個(gè)簡(jiǎn)寫(xiě)屬性。分別對(duì)應(yīng)著而實(shí)用斜線可以單獨(dú)指定水平半徑和垂直半徑。自適應(yīng)的橢圓利用border-radius生成橢圓。CSS參考手冊(cè) 橢圓對(duì)一個(gè)寬度和高度不同的容器進(jìn)行如下設(shè)置，就得到一個(gè)橢圓border-radius: 50% showImg(https://segmentfau...

terasum 2019-08-29 11:19 評(píng)論0 收藏0
使用 <wbr> 解決長(zhǎng) URL 的換行問(wèn)題

摘要：開(kāi)發(fā)中，屏幕寬度有限，超長(zhǎng)文字必須換行。嘗試原生方法無(wú)法解決問(wèn)題，只好摸索手動(dòng)斷行的做法。用解決這個(gè)問(wèn)題困擾了我很久，直到前兩天，我突然發(fā)現(xiàn)原來(lái)有軟換行的存在。本案例中，使用實(shí)際上是想借用瀏覽器計(jì)算表格各列寬度的機(jī)制。問(wèn)題我們知道，世界上文字主要有兩種：一種是以中文為代表的象形文字；另一種是以英法俄等為代表的拼音語(yǔ)系。前者的換行很簡(jiǎn)單，每個(gè)單字都有自己的意義，所以每個(gè)字后面都可以換...

104828720 2019-08-30 11:02 評(píng)論0 收藏0
使用 <wbr> 解決長(zhǎng) URL 的換行問(wèn)題

摘要：開(kāi)發(fā)中，屏幕寬度有限，超長(zhǎng)文字必須換行。嘗試原生方法無(wú)法解決問(wèn)題，只好摸索手動(dòng)斷行的做法。用解決這個(gè)問(wèn)題困擾了我很久，直到前兩天，我突然發(fā)現(xiàn)原來(lái)有軟換行的存在。本案例中，使用實(shí)際上是想借用瀏覽器計(jì)算表格各列寬度的機(jī)制。問(wèn)題我們知道，世界上文字主要有兩種：一種是以中文為代表的象形文字；另一種是以英法俄等為代表的拼音語(yǔ)系。前者的換行很簡(jiǎn)單，每個(gè)單字都有自己的意義，所以每個(gè)字后面都可以換...

lily_wang 2019-08-02 15:12 評(píng)論0 收藏0
vue實(shí)現(xiàn)伸縮菜單功能

　　效果展示：　　點(diǎn)擊即可隨意調(diào)節(jié)菜單寬度　　變動(dòng)后　　頁(yè)面結(jié)構(gòu)一共分為三部分，加上一個(gè)伸縮按鈕，在你的項(xiàng)目對(duì)應(yīng)的部分都加上class名。　　我這里定義的分別是box、left、mid、resize(按鈕類(lèi)名)　　html　　頁(yè)面結(jié)構(gòu)劃分完成之后，完善一下樣式（直接復(fù)制，菜單類(lèi)名換成你的）　　/*拖拽區(qū)div樣式*/ 　　.resize{ 　　cursor:col-resize; 　　positi...

3403771864 2022-09-12 20:06 評(píng)論0 收藏0