Maison interface Web tutoriel HTML Résumer diverses méthodes de retour à la ligne en HTML et CSS

Résumer diverses méthodes de retour à la ligne en HTML et CSS

Jun 06, 2017 am 11:15 AM

Dans le développement Web, vous pouvez utiliser la balise br en HTML pour retourner à la ligne automatiquement. Si vous êtes dans un article, vous pouvez ajouter
pour obtenir un retour à la ligne automatique - il y en a souvent. aucun espace entre le petit saut de ligne mentionné et avant le saut de ligne ; utilisez la balise

pour obtenir un grand saut de ligne. Vous pouvez également utiliser les attributs CSS pour implémenter le retour à la ligne automatique et le retour à la ligne forcé. Utilisez CSS pour envelopper des lettres et des chiffres anglais consécutifs. Si vous rencontrez le style de liste de titres d'article et espérez ne pas effectuer de retour à la ligne, vous pouvez également utiliser les attributs de style CSS pour effectuer certains. contrôle. Cet article est là pour parler des différents sauts de ligne en HTML et CSS.

Vous pouvez d'abord apprendre des cours gratuits liés au site Web chinois php

1 Apprendre"Manuel de développement HTML"<.>Tutoriels associés sur la balise
et

dans

html 开发手册2. Découvrez les différentes propriétés de saut de ligne dans le

《Manuel de référence CSS 3.0》

CSS 3.0参考手册

html, sauts de ligne en CSS1

Comment gérer les débordements CSS et les sauts de ligne

Ligne. sauts,

Remarque : valable uniquement pour l'anglais

a. Retour à la ligne pour les mots longs

retour à la ligne :

normal : par défaut, en utilisant le navigateur forme par défaut, sans détruire la structure du mot

break-word : casser la structure du mot

b, saut de ligne de texte

word-break :

Valeur :

normal :

break-all : Détruire la structure des mots pour les sauts de ligne

keep-all : Couper la ligne sous un espace demi-largeur

2.

Solution de saut de ligne forcé par contrôle CSS

Dans des circonstances normales, les éléments ont l'espace blanc par défaut : normal (retour à la ligne automatique, espace blanc : nowrap s'il ne s'agit pas d'un retour à la ligne lorsque). le texte saisi dépasse la largeur définie, il sera automatiquement renvoyé à la ligne. Mais lorsque les données saisies sont un tas de caractères, de lettres ou de chiffres sans espaces (les données normales ne devraient pas être là, mais certains testeurs le feront de cette façon), lorsque la largeur est atteinte. du conteneur est dépassé, le conteneur sera agrandi.

3.

Introduction à la mise en page des paragraphes et aux méthodes de retour à la ligne des pages Web HTML

L'apparence d'une page Web dépend en grande partie de sa mise en page. Lorsque de gros paragraphes de texte apparaissent sur la page, ils sont généralement planifiés en paragraphes et les sauts de ligne sont également divisés de manière très stricte. Cette section commence par les paramètres détaillés des paragraphes, afin que les lecteurs puissent utiliser des balises pour gérer librement de gros paragraphes de texte après avoir appris.

4.

Comment implémenter des sauts de ligne forcés ou des sauts de ligne dans DIV, td, p et autres conteneurs en HTML

normal : selon le texte dans les langues asiatiques ​​et langues non asiatiques Règles qui autorisent les sauts de ligne dans les mots

break-all : ce comportement est le même que celui normal pour les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique

keep-all : Identique à la normale pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Convient à la syntaxe de texte non asiatique contenant une petite quantité de texte asiatique : word-wrap : normal | break-word

5

Saut de ligne de texte CSS3

Texte. Le saut de ligne est en fait une fonctionnalité très courante mais discrète. Vous n’avez rien à définir, le navigateur enveloppera automatiquement la ligne. Par exemple, en anglais, le navigateur choisira d'enrouler les lignes avec des espaces à mi-largeur ou des traits d'union en fonction de la taille du conteneur. Par exemple, en chinois, le navigateur choisira d'envelopper le texte ou les signes de ponctuation. Mais parfois, lorsque vous rencontrez des mots ou des URL longs, le navigateur n'est pas si intelligent et le conteneur éclate, ce qui est moche.

Questions et réponses connexes 1.

Comment envelopper le texte affiché lorsque la souris survole le titre ?

2

Comment envelopper la chaîne renvoyée dans le filtre angulaire

.

2. Retour à la ligne de paragraphe anglais CSS, troncature de mots

[Recommandations associées]

1. Tutoriel vidéo gratuit sur le site Web PHP chinois : 《php. cn Dugu Jiujian (2) - Tutoriel vidéo CSS"

2. Tutoriel gratuit pour site Web PHP chinois : "Apprenez HTML+CSS du bout des doigts"

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Comment utiliser Bootstrap en Vue Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment écrire des lignes fendues sur bootstrap Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Apr 09, 2025 am 12:11 AM

React combine JSX et HTML pour améliorer l'expérience utilisateur. 1) JSX incorpore du HTML pour rendre le développement plus intuitif. 2) Le mécanisme DOM virtuel optimise les performances et réduit les opérations DOM. 3) Interface utilisateur de gestion basée sur les composants pour améliorer la maintenabilité. 4) La gestion des états et le traitement des événements améliorent l'interactivité.

Comment afficher la date de bootstrap Comment afficher la date de bootstrap Apr 07, 2025 pm 03:03 PM

Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.

See all articles