摘要:要实现上述的效果输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法,如果没有给它设置一个固定的宽度,它就会有一个默认的不变的宽度,想让它动态伸展是不可能。
要实现上述的效果:输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法,如果没有给它设置一个固定的宽度,它就会有一个默认的不变的宽度,想让它动态伸展是不可能。那怎么办呢?
那就设置它的宽高都为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; } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114599.html
摘要:要实现上述的效果输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法,如果没有给它设置一个固定的宽度,它就会有一个默认的不变的宽度,想让它动态伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要实现上述的效果:输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法,如果没有给它设置一个固定的宽度...
摘要:自适应的椭圆利用生成椭圆。参考手册椭圆对一个宽度和高度不同的容器进行如下设置,就得到一个椭圆半椭圆是一个简写属性。分别对应着而实用斜线可以单独指定水平半径和垂直半径。 自适应的椭圆 利用border-radius生成椭圆。CSS参考手册 椭圆 对一个宽度和高度不同的容器进行如下设置,就得到一个椭圆border-radius: 50% showImg(https://segmentfau...
摘要:开发中,屏幕宽度有限,超长文字必须换行。尝试原生方法无法解决问题,只好摸索手动断行的做法。用解决这个问题困扰了我很久,直到前两天,我突然发现原来有软换行的存在。本案例中,使用实际上是想借用浏览器计算表格各列宽度的机制。 问题 我们知道,世界上文字主要有两种:一种是以中文为代表的象形文字;另一种是以英法俄等为代表的拼音语系。前者的换行很简单,每个单字都有自己的意义,所以每个字后面都可以换...
摘要:开发中,屏幕宽度有限,超长文字必须换行。尝试原生方法无法解决问题,只好摸索手动断行的做法。用解决这个问题困扰了我很久,直到前两天,我突然发现原来有软换行的存在。本案例中,使用实际上是想借用浏览器计算表格各列宽度的机制。 问题 我们知道,世界上文字主要有两种:一种是以中文为代表的象形文字;另一种是以英法俄等为代表的拼音语系。前者的换行很简单,每个单字都有自己的意义,所以每个字后面都可以换...
效果展示: 点击即可随意调节菜单宽度 变动后 页面结构一共分为三部分,加上一个伸缩按钮,在你的项目对应的部分都加上class名。 我这里定义的分别是box、left、mid、resize(按钮类名) html 页面结构划分完成之后,完善一下样式(直接复制,菜单类名换成你的) /*拖拽区div样式*/ .resize{ cursor:col-resize; positi...
阅读 3026·2021-11-24 09:39
阅读 2254·2021-10-08 10:05
阅读 2749·2021-09-24 13:52
阅读 1569·2021-09-22 15:07
阅读 589·2019-08-30 15:55
阅读 1808·2019-08-30 15:53
阅读 687·2019-08-30 15:44
阅读 3116·2019-08-30 11:20