<input> 宽度自适应变化

wangbjun 发布于2019-08-02 16:17 / 2219人阅读

摘要：要实现上述的效果输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。

要实现上述的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。那怎么办呢？

那就设置它的宽高都为100%，让它随着父元素改变，那父元素的宽高如何确定呢？给个标签来撑起来，的宽高就可以根据它内部的内容来动态改变宽高啦，它内部的内容当然就是与输入的内容同步了，把标签隐藏在标签下面，暗搓搓地操控全局。


    {{ 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;
    }
}

GPU云服务器云服务器自适应宽度宽度自适应自适应宽度按钮 rem宽度自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55019.html

<input> 宽度自适应变化

摘要：要实现上述的效果输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要实现上述的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度...

levy9527 2019-08-30 10:50 评论0 收藏0
<<CSS揭秘>>：自适应的椭圆

摘要：自适应的椭圆利用生成椭圆。参考手册椭圆对一个宽度和高度不同的容器进行如下设置，就得到一个椭圆半椭圆是一个简写属性。分别对应着而实用斜线可以单独指定水平半径和垂直半径。自适应的椭圆利用border-radius生成椭圆。CSS参考手册椭圆对一个宽度和高度不同的容器进行如下设置，就得到一个椭圆border-radius: 50% showImg(https://segmentfau...

terasum 2019-08-29 11:19 评论0 收藏0
使用 <wbr> 解决长 URL 的换行问题

摘要：开发中，屏幕宽度有限，超长文字必须换行。尝试原生方法无法解决问题，只好摸索手动断行的做法。用解决这个问题困扰了我很久，直到前两天，我突然发现原来有软换行的存在。本案例中，使用实际上是想借用浏览器计算表格各列宽度的机制。问题我们知道，世界上文字主要有两种：一种是以中文为代表的象形文字；另一种是以英法俄等为代表的拼音语系。前者的换行很简单，每个单字都有自己的意义，所以每个字后面都可以换...

104828720 2019-08-30 11:02 评论0 收藏0
使用 <wbr> 解决长 URL 的换行问题

摘要：开发中，屏幕宽度有限，超长文字必须换行。尝试原生方法无法解决问题，只好摸索手动断行的做法。用解决这个问题困扰了我很久，直到前两天，我突然发现原来有软换行的存在。本案例中，使用实际上是想借用浏览器计算表格各列宽度的机制。问题我们知道，世界上文字主要有两种：一种是以中文为代表的象形文字；另一种是以英法俄等为代表的拼音语系。前者的换行很简单，每个单字都有自己的意义，所以每个字后面都可以换...

lily_wang 2019-08-02 15:12 评论0 收藏0
vue实现伸缩菜单功能

　　效果展示：　　点击即可随意调节菜单宽度　　变动后　　页面结构一共分为三部分，加上一个伸缩按钮，在你的项目对应的部分都加上class名。　　我这里定义的分别是box、left、mid、resize(按钮类名)　　html　　页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的）　　/*拖拽区div样式*/ 　　.resize{ 　　cursor:col-resize; 　　positi...

3403771864 2022-09-12 20:06 评论0 收藏0