Comment résoudre le problème du contenu trop long en CSS

Lorsque vous écrivez du CSS, vous devez avoir oublié le caractère critique de la conception. Par exemple, lorsque la longueur du contenu dépasse nos attentes et que nous ne pouvons pas expliquer cette possibilité, la conception de la page risque de s'effondrer. Nous ne pouvons pas garantir que CSS fonctionnera toujours comme prévu, mais nous pouvons au moins le tester avec différents types de contenu pour réduire les risques que cela se produise.

La situation spécifique est la suivante :

Un bouton avec une petite icône sur le côté droit/gauche

Il s'agit d'un bouton interrupteur avec un effet accordéon. Il y a une petite icône à droite du bouton pour souligner qu'il est cliquable. Cependant, lorsque la zone du bouton n'est pas assez longue, le texte du bouton recouvre l'icône. Cela peut arriver lorsque nous ne prenons pas en compte les contenus plus longs.

Nous pouvons ajouter suffisamment de remplissage sur le côté droit pour s'adapter à la taille de l'icône

.button {
  padding-right: 50px;
}

Remarquez comment nous avons augmenté le remplissage pour créer une zone d'affichage sûre pour l'icône, nous pouvons maintenant nous en assurer la disposition des boutons n’est plus cassée.

(Tutoriels associés recommandés : Tutoriel CSS)

Entrer un espace réservé

Lors de l'utilisation d'annotations flottantes dans notre mode forum, en particulier lorsque le bouton est sur le côté droit, nous avons besoin de tests suffisants pour éviter les problèmes causés par des espaces réservés trop longs.

Une solution consiste à ajouter position: par rapport au bouton, ce qui fera que le bouton couvrira l'espace réservé.

Nom long

Dans cette conception, l'image flotte vers la gauche et il y a des informations sur le nom de l'auteur à droite. Que se passe-t-il lorsque la longueur des informations à droite est trop longue ? Il ne fait aucun doute que la configuration va s’effondrer.

Le problème ici est que nous avons uniquement fait flotter l'image vers la gauche, ce qui fait que le nom de l'auteur se déplace à côté d'elle, mais cela ne fonctionnera bien que si le nom de l'auteur est plus court.

Afin de rendre la mise en page plus adaptable, nous devons augmenter la largeur des deux éléments. La méthode la plus recommandée consiste à utiliser flexbox, qui est plus adaptée à ces petits composants.

Il y a des liens/mots longs dans l'article

Parfois, l'article contient des hyperliens ou des mots très longs, qui peuvent ne pas apparaître lorsque la fenêtre est très large. problèmes. Mais sur certains appareils plus petits, tels que les téléphones ou les tablettes, cela peut créer des barres de défilement horizontales ennuyeuses.

Nous avons deux solutions à ce problème :

(1) Utilisez CSS word-break

.article-body p {
  word-break: break-all;
}

L'attribut word-break ne fonctionne pas bien dans différents navigateurs De même, il doit donc être entièrement testé lors de son utilisation.

(2) Ajouter un débordement et un débordement de texte aux éléments externes

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

Cette solution est plus conviviale pour les liens longs. Pour les mots longs, je recommande d'utiliser le saut de mot.

Balise d'article trop longue

Lorsque nous plaçons une balise d'article sur la carte, nous ferions mieux de déterminer sa taille uniquement en définissant son rembourrage. Lorsque le contenu de l'étiquette est trop long, la programmation de la hauteur et de la largeur peut entraîner l'effondrement de la mise en page.

Vous pouvez également définir une largeur minimale pour l'étiquette. Lorsque l'attribut min-width est utilisé sur l'élément de contenu de l'étiquette enveloppé de remplissage, la largeur change dynamiquement et le problème est résolu.

En-tête de paragraphe avec lien fixe

Cet exemple comporte un lien « Afficher plus » à droite du titre du paragraphe. Il existe différentes manières d'écrire du CSS, l'une d'elles consiste à utiliser le positionnement absolu pour les liens.

Lorsque le titre est trop long, cela peut causer des problèmes. Une meilleure solution consiste à utiliser la disposition flexbox, de sorte que lorsqu'il n'y a pas assez d'espace, le lien sera automatiquement inséré dans la ligne suivante.

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

La technique ci-dessus est appelée « Align Move Wrap ».

Tutoriel vidéo recommandé : Tutoriel vidéo CSS

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!