div css nowrap sans sauts de ligne_Experience échange

Par exemple, il y a 4 li dans un ul avec une largeur de 210 px. Les largeurs de ces 4 li sont 80 px, 120 px, 140 px et 80 px selon leurs propres longueurs de contenu.
L'effet dont j'ai besoin est que les quatre Li soient automatiquement disposés vers la gauche. Lorsque la somme des longueurs du troisième li et des deux premiers li est supérieure à la largeur de ul, le troisième li descendra d'une ligne. Affiché sur la deuxième ligne. Au lieu de rendre ul plus large ou de se rendre plus haut (le contenu s'enroule et la hauteur augmente)
a défini automatiquement la largeur de ul à 210px et la largeur de li, et a constaté que le résultat est :
ul n'est pas étiré . C'est dommage que li ne soit pas automatiquement rangé dans le même ordre que le suivant. Au lieu de cela, le contenu est renvoyé à la ligne et le li est augmenté. Puis il s'est faufilé sans vergogne au premier rang. .
Après mûre réflexion, je pense que le problème réside dans le retour à la ligne du contenu interne de li. J'ai donc cherché l'attribut CSS qui interdit les sauts de ligne.
J’ai vérifié en ligne et je ne l’ai pas trouvé. J'ai demandé à Nagamu Riyue dans le groupe et j'ai obtenu l'attribut de coupure de mot. garder tout ; pas de saut de ligne. .
Après l'avoir ajouté à li, j'ai été surpris de constater que le problème était résolu.
Lors du débogage de la page du groupe de travail, quelqu'un m'a signalé qu'il y avait un problème d'affichage.
Je me suis approché et j'ai jeté un œil, et l'affichage n'a pas changé. Je pensais juste que cela pouvait être un problème de version du navigateur.
J'utilise IE7 et FF et eux utilisent IE6. J'ai vérifié dans DW et constaté que l'attribut word-break n'est effectivement pas pris en charge par IE6 :
L'attribut CSS word-break n'est pas pris en charge Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0

C'est vraiment frustrant Ce problème m'a déjà dérangé. Cela n’a jamais été résolu.
Cet ami a de bonnes méthodes, donnez-moi quelques conseils s'il vous plaît ! Merci beaucoup.


Le problème a été résolu. C'est drôle de dire ça. Tapez le code manuellement dans DW.
J'ai trouvé nowrap dans un attribut. N'est-ce pas nowrap de word-braek ? Peut-il empêcher les sauts de ligne ?
Avec la mentalité de l'essayer, je l'ai tapé complètement
white-space: nowrap;
Il n'y a pas de ligne pointillée soulignée dans le test DW, ce qui signifie qu'il n'y a aucun problème avec la prise en charge du navigateur.
Enregistrez F12. Problème résolu. héhé. . .


Au fait, notez la syntaxe :

Syntaxe :
white-space : normal | pre nowrap
Valeur :
normal : Valeur par défaut . Méthode de traitement par défaut. Le texte gère automatiquement les sauts de ligne. Si la limite du conteneur est atteinte, le contenu ira à la ligne suivante
pre : Les nouvelles lignes et autres caractères d'espacement seront protégés. Cette valeur nécessite IE6+ ou !DOCTYPE déclaré comme prise en charge du mode conforme aux normes. Si la déclaration !DOCTYPE ne spécifie pas de mode conforme aux standards, cet attribut peut être utilisé, mais n'aura aucun effet. Le résultat est équivalent à la normale. Voir pre object
nowrap : Force tout le texte à être affiché sur la même ligne jusqu'à ce que la fin du texte ou qu'un objet br soit rencontré. Voir l'attribut noWrap

Description :
Définit ou récupère la méthode de traitement des caractères d'espacement dans l'objet.
Les espaces, comme les sauts de ligne, les espaces et les tabulations, sont ignorés par défaut dans les documents HTML. Lorsque cette propriété est définie sur normal ou nowrap , vous pouvez utiliser des entités nommées sans nouvelles lignes pour ajouter des espaces et des éléments br pour ajouter des nouvelles lignes. Cette propriété a le même effet sur le contenu que vous manipulez à l'aide du modèle d'objet de document (DOM) que sur le contenu affiché par IE.
Cette propriété fonctionne sur les objets bloc.
Cette propriété est en lecture seule pour l'objet currentStyle. Il est lisible et inscriptible par d'autres objets.
La fonctionnalité de script correspondante est whiteSpace .
de :woria.cn