Resize font-size according to div size
In regards to your code, see @Coulton. You'll need to use JavaScript.
Checkout either FitText (it does work in IE, they just ballsed their site somehow) or BigText.
FitText will allow you to scale some text in relation to the container it is in, while BigText is more about resizing different sections of text to be the same width within the container.
BigText will set your string to exactly the width of the container, whereas FitText is less pixel perfect. It starts by setting the font-size at 1/10th of the container element's width. It doesn't work very well with all fonts by default, but it has a setting which allows you to decrease or increase the 'power' of the re-size. It also allows you to set a min and max font-size. It will take a bit of fiddling to get working the first time, but does work great.
http://marabeas.io <- playing with it currently here. As far as I understand, BigText wouldn't work in my context at all.
For those of you using Angularjs, here's an Angular version of FitText I've made.
Here's a LESS mixin you can use to make @humanityANDpeace's solution a little more pretty:
@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
@media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
.fontResize((@i - 1));
}
.fontResize(@mqIterations);
And an SCSS version thanks to @NIXin!
$mqIterations: 19;
@mixin fontResize($iterations) {
$i: 1;
@while $i <= $iterations {
@media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } }
$i: $i + 1;
}
}
@include fontResize($mqIterations);
Font scaling based on width of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
Font-Size Responsive to DIV Size
There is no way to do this using simple CSS.
Chris Coyier over at CSS-Tricks explains the best solutions, and all use javascript. However, there is no point figuring it out yourself - Coyier discusses a few already-written libraries that do the job for you.
Below is an example using your code and the first such library: Dave Rupert’s FitText library. Click the button to see what happens when three divs are removed.
jsFiddle Demo (StackSnippets not working at the moment)
var grow_factor = $('.tier3_in').length / 2;
$('.tier3_test').fitText( grow_factor );
/* Below is just to remove divs for demo... */
$('button').click(function(){
$('#t3_teste_C, #t3_teste_D, #t3_teste_E').remove();
var grow_factor = $('.tier3_in').length / 2;
$('.tier3_test').fitText( grow_factor );
});
.tier3_test{
width:50%;
min-height: 100px;
height: auto;
margin-right: 2.5px ;
/*Configurações Visuais */
background: #FFF;
/*Configurações da Borda */
border: 5px solid;
border-image-slice: 1;
/* border-radius: 30px 30px 30px 30px; */
border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.tier3_in{
margin: 10px 5px 10px 5px;
width:100%;
}
.kpititle3{
font-weight: bold;
color: #000;
}
.no-wrap{
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.fittext.js"></script>
<div class="tier3_test flex-center">
<div class="tier3_in" id="t3_teste_A">
<span class="kpititle3">A</span>
<p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
</div>
<div class="tier3_in" id="t3_teste_B">
<span class="kpititle3">B</span>
<p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
</div>
<div class="tier3_in" id="t3_teste_C">
<span class="kpititle3">C</span>
<p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
</div>
<div class="tier3_in" id="t3_teste_D">
<span class="kpititle3">D</span>
<p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
</div>
<div class="tier3_in" id="t3_teste_E">
<span class="kpititle3">E</span>
<p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
</div>
</div>
<button>Remove 3 Divs</button>
Related Topics
How to Use Font Awesome from Webjars.Org With Jsf
How to Style the Resize Grabber of Textarea
React Native Text Going Off My Screen, Refusing to Wrap. What to Do
In Which Direction Do Selector Engines Read, Exactly
How to Make Google Fonts Work in Ie
Hover Effect: Expand Bottom Border
Css3 Property Webkit-Overflow-Scrolling:Touch Error
How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS
How to Clear the Cache of Nginx
Sass Invalid CSS Error: "Expected Expression"
Display:Block Inside Display:Inline
Chrome Developer Tools: How to Find Out What Is Overriding a CSS Rule
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7
Bootstrap 4 - Navbar Items Outside the Collapse
Add a CSS Class to a Field in Wtform