<html>
<head>
</head>
<body>
<input type="text" value="1" style="min-width:1px;" />
</body>
</html>
这是我的代码,它不工作。在HTML,JavaScript,PHP或CSS中有没有其他方法来设置最小宽度?
我想要一个宽度动态变化的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个内置的2em
填充,这就是问题所在,第二个问题是min-width
根本不能处理输入。
如果我设置的宽度超过了整个程序的要求,我需要1px的宽度,只有在需要的时候才需要。
发布于 2010-08-03 07:45:04
发布于 2017-04-19 15:12:15
在现代浏览器版本中,CSS单元ch
也是可用的。据我所知,它是与字体无关的单位,其中1ch
等于任何给定字体中字符0
(零)的宽度。
因此,像下面这样简单的东西可以用作调整大小的函数:
var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function
function resizeInput() {
this.style.width = this.value.length + "ch";
}
input{ font-size:1.3em; padding:.5em; }
<input>
该示例将"elem“的大小调整为值的长度+2个字符。
单元ch的一个潜在问题是,在许多字体(即Helvetica)中,字符"m“的宽度超过字符0的宽度,而字符"i”要窄得多。根据this的帖子,1ch通常比平均字符宽度宽20-30%左右。
发布于 2017-12-08 05:49:34
这是一个特定于角度的答案,但这对我来说很有效,并且在简单性和易用性方面非常令人满意:
<input [style.width.ch]="value.length" [(ngModel)]="value" />
它通过Jani's answer中的字符单位自动更新。
https://stackoverflow.com/questions/3392493
复制相似问题