Comment empêcher div de s'emballer en CSS

Dans le développement Web, CSS est l'une des technologies clés. Ici, nous allons apprendre comment utiliser l'élément div en CSS pour réaliser un affichage sans emballage. Avec ce didacticiel, vous apprendrez à utiliser CSS pour définir la largeur, la hauteur, l'alignement horizontal et vertical d'un élément div, et comment l'empêcher de s'enrouler.

L'élément div est l'un des éléments conteneurs les plus couramment utilisés en HTML5. Ils sont souvent utilisés pour combiner du contenu sur des pages Web. Le plus grand avantage de l'utilisation des éléments div est que vous pouvez facilement positionner et organiser divers éléments tels que du texte, des images, des tableaux et d'autres éléments HTML.

Voici comment définir la largeur et la hauteur d'un élément div à l'aide de CSS :

div { width: 200px; /* 设置 div 元素的宽度为 200 像素 */ height: 100px; /* 设置 div 元素的高度为 100 像素 */ }

Lorsqu'un élément div contient du texte, si le texte dépasse la largeur de l'élément div, il sera automatiquement renvoyé à la ligne. Nous pouvons empêcher le retour à la ligne du texte en définissant des styles CSS. Le code ci-dessous montre comment définir l'attribut espace blanc d'un élément div pour empêcher le retour à la ligne du texte.

div { white-space: nowrap; /* 设置 div 元素中的文本不换行 */ }

Le code ci-dessus fera apparaître l'intégralité du contenu du texte sur une seule ligne.

En plus de la largeur, de la hauteur et de l'habillage du texte, nous pouvons également définir l'alignement horizontal et vertical à l'aide de CSS. Le code ci-dessous montre comment centrer verticalement et horizontalement le texte d'un élément div à l'aide de CSS.

div { width: 200px; height: 100px; text-align: center; /* 设置 div 元素中的文本水平居中 */ line-height: 100px; /* 设置 div 元素中的文本垂直居中 */ }

Dans le code ci-dessus, la largeur et la hauteur de l'élément div sont respectivement de 200 pixels et 100 pixels. La propriététext-align: centercentrera le texte horizontalement, tandis que la propriétéline-height: 100pxcentrera le texte verticalement.text-align: center属性将使文本水平居中，而line-height: 100px属性将使文本在垂直方向上居中。

最后，我们将使用display属性来设置 div 元素在同一行上不换行显示。下面的代码演示了如何使用display: inline-block属性实现这个目的。

div { display: inline-block; /* 设置 div 元素在同一行上不换行显示 */ width: 200px; height: 100px; text-align: center; line-height: 100px; }

在上述代码中，display: inline-block属性将使 div 元素在同一行上不换行显示。

总结

在本文中，我们学习了如何使用 CSS 设置 div 元素的宽度、高度、文本换行、文本水平和垂直居中，以及如何使用display

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!