css計算函數：如何計算文本的寬度？

Question

比方說，我有以下的HTML模板：

<div id="container"> 
    <h2> Name </h2> <input type="text"> 
</div> 

，我想的是「輸入」的寬度將等於容器的寬度 - 「H2」中的文本的寬度。我該怎麼做？

Answer 1

如果H2的內容是動態的，則不能直接在CSS中執行此操作;但是，您可以使用LESS或SASS CSS實現系統來執行此操作。

如果H2內容是相當靜態的，則可以通過設置的H2（和input）的尺寸爲所述容器的相對部分做到這一點：

#container { 
    width : 100%; 
} 
#container > h2, #container > input { 
    width  :50%; 
    display  :inline-block; 
    overflow :hidden; 
    box-sizing :border-box; 
    margin  :0; 
} 
#container > h2 { 
    margin  :2rem 0; 
    text-align :center; 
} 
#container > input { 
    padding  :0.2rem; 
} 

上述（眉頭）的示例將尺寸爲標題文字貨櫃而非文字本身;您可以手動設置文本的大小或使用某種Javascript Text Scaling，其中有幾種。

但你需要牢記的是不同的瀏覽器將設置一大堆的設置稍有不同（特別是在輸入），所以你需要正常化這一切爲好。

另一種解決方案是使用CSS Flexbox。哪個會做同樣的事情;但會參考相應元素上的元素（input）的大小（h2）框尺寸不是框中的實際文字大小。

---

整體。使用LESS或SASS。這幾乎是CSS開發的未來。上船。

Answer 2

需要javascript爲

document.getElementById("yourDiv").clientWidth; // returns number, like 728 

或

document.getElementById("yourDiv").offsetWidth; 

您可以使用此得到h2和container寬度。

計算和寬度與overflow-x: hidden添加到您的input

document.getElementById('input').setAttribute("style","width:500px"); 

Answer 3

包裝input一個div內，給float: left到h2和width: 100%到input

h2 { 
 
    float:left; 
 
    margin: 0; 
 
    padding-right: 10px; 
 
} 
 

 
.fieldOccupyingRemaining { 
 
    overflow-x: hidden; 
 
} 
 

 
input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <h2> Name </h2> 
 
    <div class="fieldOccupyingRemaining"> 
 
     <input type="text"> 
 
    </div> 
 
</div>

Answer 4

我管理只用CSS來做到這一點，但僅適用於Chrome：

#container{ 
    display: inline; 
    position: relative; 
} 

h2,input{ 
    display:inline; 
} 


input { 
    width: -webkit-fill-available; 
    position: absolute; 
} 

https://jsfiddle.net/t8a44sn5/2/

我知道這不是現在有效的答案，但在將來都可以。 http://caniuse.com/#search=fill-available

Answer 5

使用顯示器和位置，輸入將採取100％的寬度父：

h2{ 
    display:inline-block; 
} 
div{ 
    display:inline-block; 
    position: relative 
} 
input{ 
    position: absolute; 
    width:100%; 
} 

https://jsfiddle.net/qzar1we9/