Html size text box to content

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.

Magic Number it with viewport units

If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. I’d call this a magic number. In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that. See the Pen Fitted Text with Viewport Units by Chris Coyier (@chriscoyier) on CodePen. This is kind of a less exotic version of fluid typography, which involves more of a sprinkling of viewport units and min/max sizes.

Dave Rupert’s FitText is up for the job. You still need a bit of a magic number to get the sizing just right for any particular job: See the Pen Fitted Text with FitText by Chris Coyier (@chriscoyier) on CodePen.

Swap the words in FitText around and you got yourself textFit! It’s another JavaScript library that adjusts font sizes to fit text into a container. Big caveat here though: textFit is designed for two-dimensions. So you need a width and height on the element for it to do it’s thing.

fitty is more like FitText in that it resizes type to maximize just horizontally, but actually seems to require no magic numbers.

TextFill is jQuery-based and requires a width, height, and a configured maximum font size to work. Here’s the basic demo we’ve been working from:

FlowType is kind of designed to work on a whole document of text, resizing it all fluidly at once, with minimum and maxium viewport sizes. But you can scope it however you want. You also apply a magic number to get things how you want them.

With width: 100% and a viewBox , SVG will be a fullsize box that resizes with an aspect ratio. Pretty neat trick! To set the type, you’ll need some magic numbers to get that viewBox just right and push the text into the right spot — but it’s doable with zero dependencies, just like the viewport units demo.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

PSA: vw is broken, because it measures what is every single time the wrong thing. It measures the viewport’s initial containing block, which means the entire viewport width including the vertical scrollbar that is almost certain to be there. This matters on operating systems that don’t use overlay scrollbars (Windows, many Linuxes, and some macOS users opt out of overlay scrollbars); on Windows, it’ll generally amount to 100vw actually being 17px wider than the body width. Therefore I say, if you are trying to measure things precisely with vw: (a) just don’t, you can’t succeed; and (b) if you insist on it anyway, make sure to allow at least 20px of slack (if that’s not acceptable, vw will not solve your problem)—and be ready to accept that even then your calc(100vw – 20px) may be wider than the body width in some circumstances.

Good to know. I find when I’m using viewport units I’m often not looking for super precision. I often use them to sprinking in a little viewport related bumps up and down with calc.

The best way I’ve gone about solving this is creating a CSS variable —window-width and set it to 100vw . Then in javascript i set this CSS variable to document.body.clientWidth which will get the width of window without the scrollbar.

Any suggestions on how to fit text vertically? I always end up with space above and below that I can’t seem to get rid of without adjusting line-height with magic numbers

Only the SVG worked properly in Firefox, none of the others. Neither textFit or TextFill work in Chrome or Firefox. fitty seemed to only react after screen resize event “ended”, but not live. (by design?) All of these feel like the incredibly awful Flash based text of 10 years ago, except for pure CSS using vw (why call this a “magic” number when it’s simple math/calc going on… nothing magic, and makes total sense) The Flash criticism is a bit funny to me because it really was just a clumsy SVG, but SVG is just an “image”, which I can get behind for custom uses. I agree that trying to make any adjustments with text “exact” is a recipe for disaster and reminds me of print designers making entire page layouts, with text, all as one image because they hated how they couldn’t control the design perfectly. Let go of control, and either style with breakpoints, vw + calc (or whatever) and let go of perfection. You get better designs and less stress. If you need pixel prefect layout, SVG to the rescue. CSS shouldn’t have to fill every niche need, it’s pulling more than it’s weight already.

Источник

box-sizing

The box-sizing CSS property sets how the total width and height of an element is calculated.

Try it

By default in the CSS box model, the width and height you assign to an element is applied only to the element’s content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen. This means that when you set width and height , you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with width: 25%; , if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.

The box-sizing property can be used to adjust this behavior:

• content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
• border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the , , and elements, and for elements whose type is radio , checkbox , reset , button , submit , color , or search .

Note: It is often useful to set box-sizing to border-box to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute , use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.

Syntax

box-sizing: border-box; box-sizing: content-box; /* Global values */ box-sizing: inherit; box-sizing: initial; box-sizing: revert; box-sizing: revert-layer; box-sizing: unset; 

The box-sizing property is specified as a single keyword chosen from the list of values below.

Values

This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin. For example, .box renders a box that is 370px wide.

Here, the dimensions of the element are calculated as: width = width of the content, and height = height of the content. (Borders and padding are not included in the calculation.)

The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box renders a box that is 350px wide, with the area for content being 330px wide. The content box can’t be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

Here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.

Formal definition

Formal syntax

Examples

Box sizes with content-box and border-box

This example shows how different box-sizing values alter the rendered size of two otherwise identical elements.

HTML

div class="content-box">Content boxdiv> br /> div class="border-box">Border boxdiv> 

CSS

div  width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; > .content-box  box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ > .border-box  box-sizing: border-box; /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Set width of an input text box in HTML, CSS, and JavaScript

This post will discuss how to set the width of an input text box in HTML, CSS, and JavaScript.

1. Set width in HTML

In HTML, you can use the width attribute to set the width of an element.

Alternatively, you can also use the size attribute to define the width of the .

2. Set width with CSS

It is good practice to separate CSS from HTML markup. The idea is to define a class to set the width CSS property.

HTML

CSS

Alternatively, you can also use the CSS selector of an input text box for setting the width CSS property.

HTML

CSS

3. Set width with JavaScript

With JavaScript, you can use the setAttribute() method to set the value of the size attribute on the input text box.

You can also dynamically change the width of a text box to match the length of the input. We can easily do this by setting the size attribute on key events.

JS

HTML

That’s all about setting the width of an input text box in HTML, CSS, and JavaScript.

Average rating 4.01 /5. Vote count: 83

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding 🙂

This website uses cookies. By using this site, you agree to the use of cookies, our policies, copyright terms and other conditions. Read our Privacy Policy. Got it

Источник

Set width of an input text box in HTML, CSS, and JavaScript

This post will discuss how to set the width of an input text box in HTML, CSS, and JavaScript.

1. Set width in HTML

In HTML, you can use the width attribute to set the width of an element.

Alternatively, you can also use the size attribute to define the width of the .

2. Set width with CSS

It is good practice to separate CSS from HTML markup. The idea is to define a class to set the width CSS property.

HTML

CSS

Alternatively, you can also use the CSS selector of an input text box for setting the width CSS property.

HTML

CSS

3. Set width with JavaScript

With JavaScript, you can use the setAttribute() method to set the value of the size attribute on the input text box.

You can also dynamically change the width of a text box to match the length of the input. We can easily do this by setting the size attribute on key events.

JS

HTML

That’s all about setting the width of an input text box in HTML, CSS, and JavaScript.

Average rating 4.01 /5. Vote count: 83

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding 🙂

This website uses cookies. By using this site, you agree to the use of cookies, our policies, copyright terms and other conditions. Read our Privacy Policy. Got it

Источник