HTML / CSS-ajuster la taille des caractères pour remplir la hauteur et la largeur des parents
j'ai un <div> élément qui redimensionne la fenêtre du navigateur est redimensionnée.
à l'intérieur du <div> j'ai un paragraphe de texte:
<div style="width:80%; height:80%; margin:10%;">
<p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>
je veux que le texte à modifier font-size comme je redimensionne le <div>, de sorte que le texte occuypy 100% de l'espace disponible.
Comment puis-je obtenir cet effet?
Serait-ce avec un pourcentage de taille de caractères?
Aurais-je à utiliser Javascript?
Merci d'avance!
5 réponses
ce dont vous avez besoin s'appelle vw. Exemple CSS: font-size: 80vw;. vw signifie largeur du champ de vision, et 80vw= 80% de l'écran de l'appareil largeur
HTML
<div id="change" style="margin:10%;">
<p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>
CSS
#change {
width: 80%;
height: 80%;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
JAVASCRIPT
$(function() {
while( $('#change div').height() > $('#change').height() ) {
$('#change div').css('font-size', (parseInt($('#change div').css('font-size')) - 1) + "px" );
}
});
fittext.js n'a pas fonctionné correctement pour moi (plugin pour jQuery, ainsi que la version dérivée sans jQuery), ni avec l'utilisation de l'attribut compresseur, donc j'ai trouvé une autre solution:
http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box (quelqu'un d'un autre travail)
qui fonctionne parfaitement pour moi - plus de textes ainsi que des textes plus courts.
il suffit de ne pas réagir à redimensionner de la fenêtre( il fonctionne Juste une fois sur le chargement de la page), donc J'ai écrit ce code court pour l'exécuter automatiquement après chaque redimensionnement de fenêtre (cela fonctionne pour moi):
<script>
function calculate_font_sizes()
{
fitTextInBox('login-h1');
fitTextInBox('subtittle');
}
calculate_font_sizes();
window.addEventListener('resize', calculate_font_sizes);
</script>
j'espère que cela peut aider quelqu'un.