Intereting Posts

jQuery .submit () n’envoie pas d’entrée soumettre à Firefox Comment accéder à un jeu de variables dans un appel Ajax JS afficher / masquer div Comment effectuer une détection de collision au pixel parfait de deux images partiellement transparentes Impossible de charger jqGrid à l’aide de json dans struts2 Python CGI FieldStorage () vide Quelles sont les alternatives à une très longue liste déroulante? Comment avoir différentes options d’édition pour append et éditer des formulaires dans jqGrid Utilisation de jQuery pour désactiver l’inheritance CSS Comment mettre à jour le modèle d’Ember périodiquement (comme dans setInterval)? IE11 appelle le gestionnaire onInput après avoir créé une entrée avec une valeur avec des signes diacritiques (éléments créés par jQuery) Obtenir les identifiants du texte sélectionné à l’aide de getSelected () Comment envoyer un fichier téléchargé via HttpPostedFileBase avec un ViewModel? Comment appliquer un sélecteur “: contient” sans jQuery? Retard Div OnLoad

Comment puis-je conserver le texte d’une div à l’intérieur? Si elle est plus grande, la div se développe vers le bas

Je voudrais savoir s’il est possible de garder un texte à l’intérieur d’un div si celui-ci dépasse la width la hauteur du «div» jusqu’à ce que tout le texte soit ajusté.

METTRE À JOUR:

Merci pour votre aide +1, devrais-je utiliser «Inherit» ou «Min-height»?

Un simple div :

plaine

Puis j’ai ajouté un word-wrap: break-word; et j’ai ceci:

à peine résolu

L’idéal:

étiré

La height div doit être augmentée afin de s’ajuster à tout le texte

Merci d’avance.

  div { width: 50px; height: 50px; border: 1px solid red; display: inline-block; word-wrap: break-word; }

    DIV   asjdkljaddddsadsssssssdfsdfsdfsf

Changez height en min-height dans votre CSS:

La propriété min-height est utilisée pour définir la hauteur minimale d’un élément.

Cela empêche la valeur de la propriété height de devenir inférieure à min-height .

  div { width: 50px; min-height: 50px; border: 1px solid red; display: inline-block; word-wrap: break-word; }

    DIV   asjdkljaddddsadsssssssdfsdfsdfsf

Utilisez simplement width:inherit pour votre

De cette façon, votre

héritera de sa hauteur du contenu qu’elle renferme

Voici la classe css

  div { width: 50px; height: inherit; border: 1px solid red; display: inline-block; word-wrap: break-word; }

et voici la démo

Essayez les lignes css. Vous pouvez vérifier ici https://jsfiddle.net/ogd5cruf/

 div { width: 50px; height: auto; border: 1px solid red; display: inline-block; word-wrap: break-word; }

Si vous modifiez height: 50px en min-height: 50px la hauteur de la div augmentera pour s’adapter à son contenu. De même, vous pouvez définir une limite sur la hauteur autorisée à l’aide de max-height .

 div { width: 50px; min-height: 50px; border: 1px solid red; display: inline-block; word-wrap: break-word; }

  asjdkljaddddsadsssssssdfsdfsdfsf

  div { width: 50px; height: 100%; border: 1px solid red; display: inline-block; word-wrap: break-word; }

    DIV   asjdkljaddddsadsssssssdfsdfsdfsf

Enlevez la hauteur fixe

  div { width: 50px; border: 1px solid red; display: inline-block; word-wrap: break-word; }

    DIV   asjdkljaddddsadsssssssdfsdfsdfsfqwqweqewqqweqweeqewqweeqw

Si vous souhaitez définir initialement la hauteur de la div, utilisez:

 div { width: 50px; min-height: 50px; border: 1px solid red; display: inline-block; word-wrap: break-word; }

Cela garantira une hauteur d’au moins 50 pixels, mais augmentera quand vous appendez du contenu.

Je lutte contre ce problème depuis longtemps. Voici l’une des manières pures de faire en sorte que cela fonctionne.

Mon exemple vous permet d’avoir un bloc de texte réactif (facultatif), avec une quantité personnalisée de lignes affichées.

 // Usually you want to have that everywhere. * { word-wrap: break-word; } div { /* height / desired number of lines, must be higher than font-size */ line-height: 16.66px; font-size: 14px; width: 50px; height: 50px; border: 1px solid red; overflow: hidden; }

 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s