how to set font size based on container size? [duplicate]

by

If you want to set the font-size as a percentage of the viewport width, use the vwunit:

#mydiv { font-size: 5vw; }

The other alternative is to use SVG embedded in the HTML. It will just be a few lines. The font-size attribute to the text element will be interpreted as “user units”, for instance those the viewport is defined in terms of. So if you define viewport as 0 0 100 100, then a font-size of 1 will be one one-hundredth of the size of the svg element.

And no, there is no way to do this in CSS using calculations. The problem is that percentages used for font-size, including percentages inside a calculation, are interpreted in terms of the inherited font size, not the size of the container. CSS could use a unit called bw (box-width) for this purpose, so you could say div { font-size: 5bw; }, but I’ve never heard this proposed.

More Related Contents:

  1. How To Get Font Size in HTML
  2. Get computed font size for DOM element in JS
  3. How to change FontSize By JavaScript?
  4. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  5. How to force browser to show image 3 inches wide?
  6. Only detect click event on pseudo-element
  7. Cache busting via params
  8. why javascript this.style[property] return an empty string? [duplicate]
  9. How to stop a setTimeout loop?
  10. Scrollable div to stick to bottom, when outer div changes in size
  11. Check element CSS display with JavaScript
  12. Why is deprecated and what is the best alternative?
  13. How to save image from canvas with CSS filters
  14. Detecting that the browser has no mouse and is touch-only
  15. Ellipsis in the middle of a text (Mac style)
  16. Add inline style using Javascript
  17. how to disable DIV element and everything inside [duplicate]
  18. How Do I Stop My Web Content From Shifting Left When The Vertical Scrollbar Appears? Roll-Up of Advice 2017 [duplicate]
  19. Load HTML page dynamically into div with jQuery
  20. jQuery position DIV fixed at top on scroll
  21. Trigger CSS Animations in JavaScript
  22. Inject CSS stylesheet as string using Javascript
  23. Why does querySelector only select the first element and how can I fix this?
  24. Detect browser wrapped lines via javascript
  25. Multiple read more / read less sections are not working on a page
  26. How to remove jQuery Mobile styling?
  27. Google map custom marker with css rounded corner
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Iframe inherit from parent
  30. Bootstrap Dropdown menu is not working

Leave a Comment