interface Webtutoriel CSSComment définir l'indentation de la deuxième ligne d'un paragraphe en utilisant CSS ?Comment définir l'indentation de la deuxième ligne d'un paragraphe en utilisant CSS ?
HTML est utilisé pour créer la structure des pages Web. De plus, CSS est utilisé pour concevoir l’apparence visuelle de ces pages. En CSS, l'indentation est l'un des aspects importants du formatage du texte sur une page Web. Il permet aux développeurs de créer des effets visuels au début des paragraphes. L'indentation peut être utilisée pour rendre le texte plus facile à lire et créer une impression de structure dans un document.
Indentation en CSS
CSS est un outil puissant qui permet aux développeurs de contrôler la présentation visuelle des éléments HTML sur une page Web. Nous pouvons styliser le texte en utilisant CSS et modifier sa police, sa taille, sa couleur et même son indentation.
En CSS, l'indentation est utilisée pour créer une séparation visuelle entre les éléments. Il crée une séparation visuelle entre les éléments en ajoutant un espace ou un remplissage sur le côté gauche ou droit des éléments.
Grammaire
css selector {
text-indent: value;
}
Utilisez la propriété Text-Indent pour indenter la première ligne
CSS permet aux développeurs de mettre en retrait la première ligne d'un paragraphe à l'aide de la propriété text-indent. Cette propriété a été définie sur 0, ce qui signifie qu'il n'y a pas d'indentation sur cette propriété. Par exemple, si nous voulions mettre en retrait tous les paragraphes d'une page Web de 25 pixels, nous pourrions utiliser le code suivant -
p {
text-indent: 25px;
}
Exemple 1
Voici un exemple de définition d'un retrait de 25 pixels pour tous les paragraphes d'une page Web.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
p {
text-indent: 35px;
}
</style>
</head>
<body>
<h2 id="This-is-an-example-of-a-text-indent-property">This is an example of a text-indent property</h2>
<p>This is the first indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>This is a second indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>This is the nth indented paragraph, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
Comment mettre en retrait la deuxième ligne d'un paragraphe ?
L'attribut "text-indent" est utilisé pour mettre en retrait la première ligne d'un paragraphe. Pour mettre en retrait la deuxième ligne d’un paragraphe, nous devons d’abord supprimer l’indentation de la première ligne. Pour ce faire, nous pouvons déplacer la première ligne vers la gauche en utilisant une valeur négative de "text-indent", et après cela, nous déplaçons la deuxième ligne vers la droite en utilisant une valeur positive de "padding-left". Par exemple -
p {
text-indent: -20px;
padding-left: 20px;
}
Dans le code ci-dessus, nous indentons la première ligne du paragraphe de -20px, ce qui la déplace de -20px vers la gauche, et la deuxième ligne de 20px, ce qui la déplace vers la droite.
Regardons quelques exemples d'indentation de la deuxième ligne d'un paragraphe à l'aide de CSS.
Exemple 2
Ceci est un exemple de définition de l'indentation de la deuxième ligne d'un paragraphe à l'aide d'éléments CSS
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
p {
text-indent: -30px;
padding-left: 30px;
}
</style>
</head>
<body>
<h2 id="Indent-Second-Line-of-Paragraph">Indent Second Line of Paragraph</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Exemple 3
Voici un exemple d'utilisation de sélecteurs de classe CSS pour définir le retrait de la deuxième ligne d'un paragraphe.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
.indent-p {
text-indent: -4em;
padding-left: 4em;
}
</style>
</head>
<body>
<h2 id="Indent-Second-Line-of-Paragraph-using-CSS-class-selector">Indent Second Line of Paragraph using CSS class selector</h2>
<p class="indent-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Conclusion
Nous discutons ici de l'indentation de la deuxième ligne d'un paragraphe. C'est un moyen simple d'améliorer la lisibilité et l'apparence de vos pages Web. En utilisant l'attribut « text-indent », nous pouvons créer un aspect unique et visuellement attrayant qui fait ressortir le contenu.
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!
Pour défendre la déclaration ternaireApr 22, 2025 am 11:25 AMIl y a quelques mois, j'étais sur Hacker News (comme on le fait) et j'ai rencontré un article (maintenant supprimé) sur le fait de ne pas utiliser les déclarations. Si vous êtes nouveau dans cette idée (comme moi
Utilisation de l'API de discours Web pour les traductions multilinguesApr 22, 2025 am 11:23 AMDepuis les premiers jours de la science-fiction, nous avons fantasmé sur les machines qui nous parlent. Aujourd'hui, c'est monnaie courante. Même ainsi, la technologie de fabrication
Blocs de jetpack GutenbergApr 22, 2025 am 11:20 AMJe me souviens quand Gutenberg a été libéré dans Core, parce que j'étais à WordCamp Us ce jour-là. Un certain nombre de mois se sont passés maintenant, donc j'imagine de plus en plus d'entre nous
Création d'un composant de pagination réutilisable dans VueApr 22, 2025 am 11:17 AML'idée derrière la plupart des applications Web est de récupérer les données de la base de données et de la présenter à l'utilisateur de la meilleure façon possible. Quand nous traitons des données là-bas
En utilisant 'Box Shadows' et Clip-chemin ensembleApr 22, 2025 am 11:13 AMLaissez faire un peu étape par étape d'une situation où vous ne pouvez pas faire ce qui semble logique, mais vous pouvez toujours le faire avec la ruse CSS. En ce moment
Tout sur MailTo: liensApr 22, 2025 am 11:04 AMVous pouvez faire un lien d'ancrage de variété de jardin () ouvrir un nouvel e-mail. Laissez faire un petit voyage dans cette fonctionnalité. C'est assez facile à utiliser, mais comme pour tout
Il est assez cool de voir comment Netlify CMS fonctionne avec n'importe quel générateur de sites de fichier platApr 22, 2025 am 11:03 AMPetite confession ici: quand j'ai vu Netlify CMS pour la première fois en un coup d'œil, je me suis dit: cool, peut-être que j'essaierai un jour quand j'explore CMSS pour un nouveau projet. Alors
Test des régressions visuelles avec PercyApr 22, 2025 am 11:02 AMC'est une tâche herculéenne de tester
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
