Redimensionner dynamiquement conteneur à adapter le texte
Il existe de nombreux plugins jQuery qui vous permettent de redimensionner un texte à un conteneur. Mais comment pouvez-vous modifier dynamiquement la largeur/hauteur d'un div conteneur pour adapter le texte à l'intérieur de celui-ci?
Ci-dessous un exemple. Comme vous pouvez le voir, le texte est actuellement débordement de la div. Comment pouvez-vous en programmant redimensionner la div conteneur pour adapter le texte indépendant de la taille de la police et de contenu?
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100px; height:100px;border:1px solid red; overflow: hidden;">
<p style="font-size:40px;">This is the text</p>
</div>
</body>
</html>
- Inverser toutes les lignes dans un plugin qui fait le contraire, et voir si cela fonctionne ?
- Que diriez-vous "height:auto;" ?
div
s sont flexibles par défaut. Vous devriez être en mesure de réduire le style à la justeborder:1px solid red;
et la div s'étirer.- Mais les divs sont d'affichage type de bloc, de sorte qu'il sera de 100% de la largeur, de la hauteur de l'auto
- J'ai remarqué que votre réponse. Vous avez raison, bien que le réglage de la largeur en pourcentage a de mieux soutenir que
display: table;
. caniuse.com/#search=Table%20display plus Facile et plus zen pour laisser lediv
être undiv
. :p - Comment se fait - % de la largeur de fixer pour vous? Aussi, mieux prendre en charge? 94% n'est pas suffisant?
Vous devez vous connecter pour publier un commentaire.
Il devrait être fait avec le css mais c'est la façon de le faire en JS/jQuery
http://jsfiddle.net/2CDt5/2/
Solution Alternative est de définir la largeur la hauteur et la propriété d'affichage avec la méthode css
http://jsfiddle.net/7yH2t/
<div>
Supprimer
width
etheight
, ajouterdisplay:table;
Vous de décider comment voulez-vous que la case pour ajuster le texte en largeur ou en hauteur.
Si vous voulez largeur, changement
Si vous voulez la hauteur, changer
JSFiddle: http://jsfiddle.net/39e7z/
<div>