html - font - CSS: ¿Es posible adaptar el tamaño de fuente al ancho div?
title html attribute (5)
Tengo un div con 70% de ancho, y esto es lo que quiero hacer:
- poner algunas palabras en ese div
- Adapta el tamaño de fuente para que esas palabras ocupen todo el ancho de div
¿Es esto posible con solo css? Aquí está mi código:
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
}
Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
This Text
</div>
Nota: el tamaño del div es sensible , esto es importante. ¡Gracias por adelantado!
Quizás no sea exactamente lo que está buscando, pero sí algo. Puede hacer que tanto la fuente como el elemento sean relativos al ancho de la vista.
p {
font-size: 5vw;
background-color: red;
width: 50vw;
}
<p>
I''m a P!
</p>
Sí, pero creo que necesitas usar JS (jQuery).
JS:
$(function(){
var box = $(''.box'');
var boxWith = box.width();
$(''.box h1'').css(''font-size'',boxWith);
});
Solo tienes que añadir display: inline; en tu código
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
display: inline;
}
</style>
</head>
<body>
<div class="parent">
This Text
</div>
</body>
</html>
**You can change font-size:10vh;**
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
color:white;
font-size:10vh;
}
Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
Text
</div>