Comment gérer l'affichage incomplet de la dernière ligne de texte en HTML-tutoriel HTML-php.cn

Comment gérer l'affichage incomplet de la dernière ligne de texte en HTML

php中世界最好的语言

Libérer： 2017-11-25 11:57:12

original

4951 Les gens l'ont consulté

Dans notre page Web, le contenu du texte dans la mise en page dépasse le DIV ou est à moitié affiché de manière incomplète. Alors, comment pouvons-nous le résoudre ? Aujourd'hui, je vais vous montrer comment gérer l'affichage incomplet de la dernière ligne de texte.

Comment résoudre le problème selon lequel la moitié de la dernière ligne de texte de la zone DIV dans la mise en page CSS div n'est pas entièrement affichée ? Ou la dernière ligne de contenu texte dépasse la bordure DIV, et comment contrôler et choisir la disposition CSS pour afficher et masquer la dernière ligne de contenu.

La dernière ligne de texte dépasse la bordure DIV

Dans la mise en page, il apparaît souvent que la ou les dernières lignes de texte dépassent la bordure DIV.

1. Le code source complet du HTML est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>显示不全或超出</title> 
<style> 
.div{ border:1px solid #000; width:200px; height:50px;line-height:20px} 
</style> 
</head> 
<body> 
<div class="div"> 
最后一排文字显示不完<br /> 
最后一排文字显示一半测试<br /> 
DIVCSS实例测试 
</div> 
</body> 
</html>

Copier après la connexion

La dernière ligne de texte dans la mise en page CSS est affichée au-delà de la bordure DIV

La dernière ligne du texte est affiché au-delà de la bordure DIV

Raison

Le contenu de la police de texte ci-dessus est affiché au-delà de la DIV. Il s'agit généralement d'une erreur de réglage de la hauteur. La hauteur de cette boîte est de 50 px et le CSS. La hauteur de la ligne est de 20 px. Ensuite, trois lignes de texte occuperont une hauteur de 60 px, mais la hauteur définie est de 50 px, la hauteur naturelle est de 10 px de moins. Ce phénomène de débordement de contenu se produira dans les navigateurs de versions supérieures.

4. Solutions

Il existe quatre solutions pour résoudre le problème de dépassement de l'affichage de la dernière ligne :

La première consiste à calculer la hauteur et à saisir le contenu. trois lignes et line-height est défini sur 20px, alors la hauteur est définie sur 3 fois 20 = 60px (au moins égale ou supérieure à 60px).

Deuxièmement, supprimez le style de hauteur. Si vous n'êtes pas sûr de la quantité de contenu contenue dans la boîte DIV, la méthode la plus simple et la plus courante consiste à annuler le réglage de la hauteur de la DIV, afin que la DIV augmente avec le contenu

La troisième méthode consiste à modifier la hauteur de la ligne. Si la hauteur dans votre mise en page CSS est fixe et que le contenu d'affichage est également fixe et que vous souhaitez l'afficher complètement, vous ne pouvez modifier que le contenu. valeur de la hauteur de ligne CSS Dans ce cas, 50 divisé par 3 = 16,6, puis définir la hauteur de ligne sur entier16px peut résoudre le problème du débordement du contenu vers une hauteur fixe.

La quatrième méthode consiste à réduire le contenu. Trois lignes de contenu sont affichées ici. Il vous suffit de supprimer une ligne pour que seules deux lignes de contenu puissent être affichées.

La police de la dernière ligne de texte est à moitié affichée

Dans de nombreux cas, en plus des problèmes de mise en page ci-dessus, le contenu au-delà de la DIV ne déborde pas mais est masqué et non affiché .Comment le résoudre ?

1. Exemple de code HTML+CSS

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>显示不全或超出</title> 
<style> 
.div{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px} 
</style> 
</head> 
<body> 
<div class="div"> 
最后一排文字显示不完<br /> 
最后一排文字显示一半测试<br /> 
DIVCSS实例测试 
</div> 
</body> 
</html>

Copier après la connexion

Analyse des raisons de l'affichage incomplet du texte de mise en page CSS

Le cas ci-dessus est le même que celui de la première boîte DIV de débordement code, sauf qu'il y a plus de style overflow:hidden ajouté. Ce style "overflow:hidden" a le contenu au-delà du DIV masqué, de sorte que la dernière ligne de texte apparaît incomplète ou seulement à moitié affichée.

Solution

La solution peut être résolue en se référant au problème de compatibilité CSS précédent "La dernière ligne de texte dépasse la bordure DIV".

4-1 : Réduisez le nombre de lignes de texte (réduisez simplement une ligne ici)

4-2 : Réglez la hauteur, calculez bien la hauteur

4- 3 : Ne définissez pas la hauteur

4-4 : Lorsque la hauteur est fixe, calculez et modifiez la valeur de la hauteur de ligne

Pour la méthode spécifique, veuillez consulter le cas de problème 1 pour solutions détaillées.

Voici les solutions au problème selon lequel le contenu du texte dépasse le DIV ou que la moitié de l'affichage est incomplète. Pour un contenu plus passionnant, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment convertir l'encodage CSS

Comment créer une animation de papillon volant avec CSS3

Comment utiliser le canevas pour créer un effet d'animation de fontaine de particules

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!