Maison > interface Web > js tutoriel > le corps du texte

Comment résoudre le débordement de contenu textuel dans div

小云云
Libérer: 2018-01-22 13:43:35
original
3836 Les gens l'ont consulté

Parfois, lorsque nous modifions du contenu dans un div, celui-ci déborde, alors que devons-nous faire si cela se produit ? Cet article présente principalement les solutions courantes au débordement de contenu textuel dans p. A une très bonne valeur de référence. Venez apprendre ensemble.

En raison de l'incertitude sur la longueur du contenu du texte et de la fixité de la mise en page, un débordement de texte est souvent rencontré. Il existe une solution :

1 : Spécifiez la largeur et la hauteur du conteneur parent de texte et définissez-le au-delà du masquage : overflo: "hidde"

-------L'inconvénient est que le dernier une ligne de texte est souvent affichée de manière incomplète. Dans ce cas, il est recommandé d'utiliser

lorsque l'on contrôle seulement l'affichage d'une seule ligne de texte 2 : css+p empêche le débordement du texte. devient une ellipse et affiche un saut de ligne : nowrap; word-break: break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis;------L'inconvénient est que le navigateur Firefox ne fonctionne pas bien et va tronquer, il n'y a pas beaucoup de pages à masquer, il est recommandé d'utiliser

3 : Utiliser jQuery pour limiter le nombre de caractères


Recommandations associées :
$(document).ready(function(){
//限制字符个数
$(“.word_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
}
});
});
Copier après la connexion

Masquage de débordement : les solutions les plus complètes pour résoudre le contenu problèmes de débordement à l'aide de CSS

Résumer les problèmes de débordement de contenu causés par les flotteurs CSS et effacer les flotteurs Méthode

jQuery implémente la méthode de contrôle du débordement du contenu du texte représenté par des points de suspension (...)_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!