將輸入字段的寬度設置為原始內容的寬度（使用CSS）

Question

我正在嘗試實現以下功能：具有許多行的網頁，例如Type.classname=com.long.qualified.class.Name ，其中該行對應於Java屬性文件中的條目。 每個這樣的行都引用一個名為（contextRoot）/.../ path /.../ Name.java的文件。

我希望能夠輕松地復制文件名，因此我可以（在Eclipse中）找到該屬性引用的源文件。 因此，我將包名稱設為<label>並將類名稱設為<input> ，並將它們與for相連。 然后我在類名上添加了onfocus ，在其中執行this.select() 。 我還添加了樣式，以使文本字段看起來不像文本字段，即字體，border：none，只讀（不是CSS）。

我的第一個問題是：如何將文本字段的寬度設置為原始內容的完整寬度。 其他問題有關於動態調整寬度的答案-這對我來說不是問題。 可以使用CSS完成，還是必須使用JavaScript。 有超過1000條這樣的行，我寧願不要使用超出所需數量的腳本。

我的第二個問題是：我是在艱難地進行這些工作，還是有一種更容易實現我的目標的方法，或者這幾乎是其他任何人都可以做到的方式嗎？

謝謝。

Answer 1

您可以使用box-sizing屬性來實現所需的功能。

http://jsfiddle.net/AjtCR/

以下是與之兼容的瀏覽器： http : //caniuse.com/#search=box-sizing

​<div>
 <input type="text" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​div {
 width:200px;
 height:200px;
 background:#999;
 padding-top:50px;
}

input {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width:100%;
 padding:5px;
 border:1px solid #000;
}