css calc function: How to calculate width of text?

Question

Let's say that I have the following html template:

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

and I want that the width of 'input' will be equal to the width of container - the width of text inside 'h2'. How can I do it?

If the contents of `h2` are dynamic, you can't do this in CSS directly; you can use [LESS](http://lesscss.org) or [SASS](http://sass-lang.com/guide) CSS systems to do this. — Martin, Aug 11 '17 at 10:42
In addition you can use JavaScript if you don't want using a css preprocessor -> https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript — Samuil Petrov, Aug 11 '17 at 10:44
How wide is your `#container`? Does it have a pre-defined width? If you have, you can simply use flexbox so that the input can take up whatever space that is left unoccupied. — Terry, Aug 11 '17 at 10:49
There is no way to use calc() to take the width of text element ? — CrazySynthax, Aug 11 '17 at 11:10

score 1 · Answer 1 · answered Aug 11 '17 at 10:52

If the contents of H2 are dynamic, you can't do this in CSS directly; however, you can use LESS or SASS CSS implementation systems to do this.

If the contents of H2 are fairly static, you can do this by setting the size of H2 (and input) as being relative parts of the container:

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

The above (cruddy) example sets the size of the title text container rather than the text itself; you can manually set the size of the text youself or use some sort of Javascript Text Scaling, of which there are several.

But you need to bear in mind that different browsers will set a whole lot of slightly different settings (especially on inputs) so you will need to normalize this all as well.

Another solution is to use CSS Flexbox. Which will do the same sort of thing; but will reference the size of an element (input) on the corresponding elements (h2) box sizing NOT the actual text sizing within the box.

Overall. Use LESS or SASS. This is pretty much the future of CSS development. Get on board.

"however, you can use LESS or SASS CSS implementation systems to do this" Can you explain how or give a link to those parts of their documentation? — Alexey Romanov, Sep 16 '22 at 14:28

score 1 · Answer 2 · answered Aug 11 '17 at 11:28

1

Use display and position, input will take 100% width of parent:

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

https://jsfiddle.net/qzar1we9/

answered Aug 11 '17 at 11:28

Alex

113
10

score 0 · Answer 3 · answered Aug 11 '17 at 10:58

you need javascript for that

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

or

document.getElementById("yourDiv").offsetWidth;

you can get width of h2 and container using this.

calculate and add the width to your input

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

score 0 · Answer 4 · answered Aug 11 '17 at 11:11

wrap input inside a div with overflow-x: hidden , give float: left to h2 and width: 100% to 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>

score 0 · Answer 5 · answered Aug 11 '17 at 11:12

I manage to do it with css only, but works only with chrome:

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

h2,input{
  display:inline;
}


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

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

I know this is not a valid answer for now, but in future can be. http://caniuse.com/#search=fill-available

score 0 · Answer 6 · answered Oct 16 '19 at 08:30

0

Use the Below Code for it

span{
display:inline-block;
width:180px;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}

JSFiddle

answered Oct 16 '19 at 08:30

MADHUR GUPTA

1,014
10
14

css calc function: How to calculate width of text?

6 Answers6