La taille de la police s'ajuste automatiquement pour s'adapter
J'essaie de faire ce que dit le titre. J'ai vu que font-size peut être un pourcentage. Donc, je suppose que font-size: 100%; le ferait, mais non.
Voici un exemple: http://jsfiddle.net/xVB3t/
Puis-je obtenir de l'aide s'il vous plaît?
(S'il est nécessaire de le faire par programme avec js il n'y a pas de problème)
Cette question pourrait vous aider, mais je vous préviens que cela résout le problème grâce à jQuery:
Taille automatique du texte dynamique pour remplir le conteneur de taille fixe
Bonne chance.
Le PO de cette question a créé un plugin, voici le lien vers celle-ci (& télécharger )
BTW je suggère jQuery parce que Gaby a souligné cela ne peut pas être fait que CSS et vous avez dit que vous étiez prêt à utiliser js ...
Ne peut pas être fait avec CSS.
100% est en relation avec le font-size calculé de l'élément parent.
référence: http://www.w3.org/TR/CSS2/fonts.html#font-size-props
Pour une solution jQuery, regardez Taille automatique du texte dynamique pour remplir un conteneur de taille fixe
Je cherchais du travail et j'aimais la réponse de tnt-rox, mais je ne pouvais m'empêcher de remarquer qu'il y avait quelques frais supplémentaires qui pourraient être éliminés .
document.body.setScaledFont = function(){
this.style.fontSize = (this.offsetWidth*0.35)+'%';
return this;
}
document.body.setScaledFont();
Réduire les frais généraux le rend un peu plus rapide si vous l'ajoutez à un événement onresize.
Si vous souhaitez uniquement redimensionner la police contenue dans un élément spécifique, vous pouvez également procéder comme suit
window.onload = function(){
var scaledFont = function(el){
if(el.style !== undefined){
el.style.fontSize = (el.offsetWidth*0.35)+'%';
}
return el;
}
navs = document.querySelectorAll('.container>nav'),
i;
window.onresize = function(){
for(i in navs){
scaledFont(navs[i]);
}
};
window.onresize();
};
Je viens de remarquer que la réponse de Nicolaas comportait également des frais généraux supplémentaires. Je l'ai nettoyé un peu. Du point de vue des performances, je ne suis pas vraiment partisan d’utiliser une boucle while et de diminuer lentement la taille jusqu’à ce que vous en trouviez une qui convient ..__
function setPageHeaderFontSize(selector) {
var $ = jQuery;
$(selector).each(function(i, el) {
var text = $(el).text();
if(text.length) {
var span = $("<span>").css({
visibility: 'hidden',
width: '100%',
position: 'absolute',
'line-height': '300px',
top: 0,
left: 0,
overflow: 'visible',
display: 'table-cell'
}).text(text),
height = 301,
fontSize = 200;
$(el).append(span);
while(height > 300 && fontSize > 10) {
height = span.css("font-size", fontSize).height();
fontSize--;
}
span.remove();
$(el).css("font-size", fontSize+"px");
}
});
}
setPageHeaderFontSize("#MyDiv");
Et voici un exemple de mon code précédent utilisant jquery .
$(function(){
var scaledFont = function(el){
if(el.style !== undefined){
el.style.fontSize = (el.offsetWidth*0.35)+'%';
}
return el;
};
$(window).resize(function(){
$('.container>nav').each(scaledFont);
}).resize();
});
Un peu tard mais voici comment j'aborde ce problème:
document.body.setScaledFont = function() {
var f = 0.35, s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
}
document.body.setScaledFont();
La police de base du document est maintenant définie.
Pour le reste de vos éléments dans le domaine dom, définissez les tailles de police sur% ou em et elles seront proportionnelles.
Voici une autre solution jQuery ...
/**
* Resizes page header font-size for the text to fit.
* basically we add a hidden span into the header,
* put the text into it and then keep reducing the super large font-size
* for as long as the height of the span exceeds the super
* tall line-height set for the test (indicating there is more than one line needed
* to show the text).
*/
function setPageHeaderFontSize(selectorString) {
jQuery(selectorString).each(
function(i, el) {
var text = jQuery(el).text();
var length = text.length;
if(length) {
var id = "TestToSeeLengthOfElement_" + i;
jQuery(el).append("<span style='visibility: hidden; width: 100%; position: absolute; line-height: 300px; top: 0; left: 0; overflow: visible; display: table-cell;' id='"+id+"'>"+text+"</span>");
var innerEl = jQuery("#"+id);
var height = 301;
var fontSize = 200;
while(height > 300 && fontSize > 10) {
height = jQuery(innerEl).css("font-size", fontSize).height();
fontSize--;
}
jQuery(innerEl).remove();
jQuery(el).css("font-size", fontSize+"px");
}
}
);
}
//you can run it like this... using any jQuery enabled selector string (e.g. h1.pageHeaders works fine).
setPageHeaderFontSize("#MyDiv");
ici j'ai une solution mootools:
Element.implement("fitText", function() {
var e = this.getParent();
var maxWidth = e.getSize().x;
var maxHeight = e.getSize().y;
console.log(maxWidth);
var sizeX = this.getSize().x;
var sizeY = this.getSize().y;
if (sizeY <= maxHeight && sizeX <= maxWidth)
return;
var fontSize = this.getStyle("font-size").toInt();
while( (sizeX > maxWidth || sizeY > maxHeight) && fontSize > 4 ) {
fontSize -= .5;
this.setStyle("font-size", fontSize + "px");
sizeX = this.getSize().x;
sizeY = this.getSize().y;
}
return this;
});
$$("span").fitText();
Voici un moyen de trouver la hauteur du texte que vous utilisez . C'est simple et n'utilise que du javascript. Vous pouvez l'utiliser pour ajuster votre texte par rapport à la hauteur souhaitée.
function getTextHeight(text, fontSize) {
var numberOfLines = 0;
var STL = text;
for(var i = 0; i < STL.length; i++){
if(STL[i] === '<'){
try{
if(STL[i + 1] === 'b' && STL[i + 2] === 'r' && STL[i + 3] === '>'){
numberOfLines++;
}
}
catch(err){
break;
}
}
return (numberOfLines + 1) * fontSize;
}