I know that this could be solved fairly easily with Javascript, but I'm only interested in a pure CSS solution.
I want a way to dynamically resize text so that it always fits into a fixed div. Here is the sample markup:
<div style="width: 200px; height: 1em; overflow: hidden;">_x000D_
<p>Some sample dynamic amount of text here</p>_x000D_
</div>
_x000D_
I was thinking that maybe this could be possible by specifying the width of the container in ems, and getting the font-size to inherit that value?
This question is related to
css
For reference, a non-CSS solution:
Below is some JS that re-sizes a font depending on the text length within a container.
Codepen with slightly modified code, but same idea as below:
function scaleFontSize(element) {
var container = document.getElementById(element);
// Reset font-size to 100% to begin
container.style.fontSize = "100%";
// Check if the text is wider than its container,
// if so then reduce font-size
if (container.scrollWidth > container.clientWidth) {
container.style.fontSize = "70%";
}
}
For me, I call this function when a user makes a selection in a drop-down, and then a div in my menu gets populated (this is where I have dynamic text occurring).
scaleFontSize("my_container_div");
In addition, I also use CSS ellipses ("...") to truncate yet even longer text too, like so:
#my_container_div {
width: 200px; /* width required for text-overflow to work */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
So, ultimately:
Short text: e.g. "APPLES"
Fully rendered, nice big letters.
Long text: e.g. "APPLES & ORANGES"
Gets scaled down 70%, via the above JS scaling function.
Super long text: e.g. "APPLES & ORANGES & BANAN..."
Gets scaled down 70% AND gets truncated with a "..." ellipses, via the above JS scaling function together with the CSS rule.
You could also explore playing with CSS letter-spacing to make text narrower while keeping the same font size.
Create a lookup table that computes font-size based on the length of the string inside your <div>
.
const fontSizeLookupTable = () => {
// lookup table looks like: [ '72px', ..., '32px', ..., '16px', ..., ]
let a = [];
// adjust this based on how many characters you expect in your <div>
a.length = 32;
// adjust the following ranges empirically
a.fill( '72px' , );
a.fill( '32px' , 4 , );
a.fill( '16px' , 8 , );
// add more ranges as necessary
return a;
}
const computeFontSize = stringLength => {
const table = fontSizeLookupTable();
return stringLength < table.length ? table[stringLength] : '16px';
}
Adjust and tune all parameters by empirical test.
I used smth like this:
1.style.fontSize = 15.6/(document.getElementById("2").innerHTML.length)+ 'vw'
Where: 1 - parent div Id and 2 - Id of div with my text
This solution might also help :
$(document).ready(function () {
$(window).resize(function() {
if ($(window).width() < 600) {
$('body').css('font-size', '2.8vw' );
} else if ($(window).width() >= 600 && $(window).width() < 750) {
$('body').css('font-size', '2.4vw');
}
// and so on... (according to our needs)
} else if ($(window).width() >= 1200) {
$('body').css('font-size', '1.2vw');
}
});
});
It worked for me well !
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
use this equation.
For anything larger or smaller than 1440 and 768, you can either give it a static value, or apply the same approach.
The drawback with vw solution is that you cannot set a scale ratio, say a 5vw at screen resolution 1440 may ended up being 60px font-size, your idea font size, but when you shrink the window width down to 768, it may ended up being 12px, not the minimal you want. With this approach, you can set your upper boundary and lower boundary, and the font will scale itself in between.
You might be interested in the calc
approach:
font-size: calc(4vw + 4vh + 2vmin);
done. Tweak values till matches your taste.
If doing from scratch in Bootstrap 4
$enable-responsive-font-sizes
and turn it on.The only way would probably be to set different widths for different screen sizes, but this approach is pretty inacurate and you should use a js solution.
h1 {
font-size: 20px;
}
@media all and (max-device-width: 720px){
h1 {
font-size: 18px;
}
}
@media all and (max-device-width: 640px){
h1 {
font-size: 16px;
}
}
@media all and (max-device-width: 320px){
h1 {
font-size: 12px;
}
}
Edit: Watch out for attr() Its related to calc() in css. You may be able to achieve it in future.
Unfortunately for now there isn't a css only solution. This is what I suggest you do. To your element give a title attribute. And use text-overflow ellipsis to prevent breakage of the design and let user know more text is there.
<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
Some sample dynamic amount of text here
</div>
.
.
.
Alternatively, If you just want to reduce size based on the viewport. CSS3 supports new dimensions that are relative to view port.
body {
font-size: 3.2vw;
}
As many mentioned in comments to @DMTinter's post, the OP was asking about the number ("amount") of characters changing. He was also asking about CSS, but as @Alexander indicated, "it is not possible with only CSS". As far as I can tell, that seems to be true at this time, so it also seems logical that people would want to know the next best thing.
I'm not particularly proud of this, but it does work. Seems like an excessive amount of code to accomplish it. This is the core:
function fitText(el){
var text = el.text();
var fsize = parseInt(el.css('font-size'));
var measured = measureText(text, fsize);
if (measured.width > el.width()){
console.log('reducing');
while(true){
fsize = parseInt(el.css('font-size'));
var m = measureText(text, fsize );
if(m.width > el.width()){
el.css('font-size', --fsize + 'px');
}
else{
break;
}
}
}
else if (measured.width < el.width()){
console.log('increasing');
while(true){
fsize = parseInt(el.css('font-size'));
var m = measureText(text, fsize);
if(m.width < el.width()-4){ // not sure why -4 is needed (often)
el.css('font-size', ++fsize + 'px');
}
else{
break;
}
}
}
}
Here's a JS Bin: http://jsbin.com/pidavon/edit?html,css,js,console,output
Please suggest possible improvements to it (I'm not really interested in using canvas to measure the text...seems like too much overhead(?)).
Thanks to @Pete for measureText function: https://stackoverflow.com/a/4032497/442665
Try RFS (for responsive font size) library by MartijnCuppens that maybe will be implemented in Bootstrap
Source: Stackoverflow.com