Une feuille de style en cascade (CSS) propose une propriété pour afficher tous les éléments HTML sans interruption, ou vous pouvez dire que tous les contenus HTML sont affichés sur une seule ligne. HTML et CSS contribuent tous deux à accomplir ce phénomène sur la page Web. L'avantage de base de cela est que le contenu HTML prendra moins de place lorsqu'ils seront affichés. Il rend également le contenu aligné.

Il n'y a aucune fonction intégrée dans CSS comme les autres effets, par exemple la décoration texte, le type de style de liste, etc. Mais nous devons appliquer cet effet de rupture sans ligne en utilisant une propriété d'affichage qui est valorisée comme une propriété en ligne en ligne.

Pour mettre en œuvre l'effet de propriété CSS No Line Break, vous devez connaître les bases de HTML et CSS. Nous utiliserons un éditeur de texte pour le code et un navigateur pour implémenter le code dans l'éditeur. Élaborez sur la propriété CSS du bloc en ligne et ses effets sur le phénomène «No Line Break».

Propriété CSS en ligne en ligne

Cette propriété est utilisée pour afficher un élément dans le conteneur à blocage en ligne. Dans cette approche, le bloc d'éléments est converti en élément en ligne. Ce faisant, il y a la prévention de la pause de ligne. La syntaxe de la propriété en bloc en ligne est affichée dans les éléments suivants:

Article
Affichage: bloc en ligne;

Nous implémenterons cette propriété de deux manières: via la liste et la div.

Exemple 1: pas de rupture de ligne dans les listes

Dans le premier exemple, nous appliquerons le concept de pause sans ligne sur la liste. Une liste est un contenu HTML où le texte est représenté verticalement avec les balles, soit la liste est commandée ou non ordonnée. Lorsque nous parlons de listes, nous proposons toujours la vue d'avoir chaque élément de la liste dans une ligne distincte avec une pause de ligne. Mais parfois, selon le scénario, nous voulons afficher les éléments de la liste sans balles en une seule ligne. Cela se fait en affichant les éléments de la liste à l'aide du CSS avec la propriété «No Line Break». Démarrons le code HTML avec la section Body.

Nous avons utilisé deux titres du texte à travers les étiquettes de cap -

et

. Après cela, la liste non ordonnée est créée avec 5 éléments dans chaque ligne.

• Réseau informatique


• …

La même syntaxe est suivie pour que les 5 éléments soient entrés dans chaque ligne.

Après cela, le La balise ferme la liste et ferme également le reste des balises aussi. Maintenant, considérons les balises de style car nous devons appliquer la propriété d'affichage sur la liste afin que chaque élément de liste s'affiche sur une seule ligne.

Li
Affichage: bloc en ligne;

Nous utilisons la balise «Li» directement dans le CSS pour appliquer l'effet de blocage en ligne sur tous les éléments de la liste et les empêcher de s'afficher sur une ligne séparée. De plus, nous appliquons la couleur de la police aux deux titres. Ceci est un style supplémentaire et n'est pas obligatoire pour utiliser.

Pour le style du corps, nous utilisons la couleur d'arrière-plan et la couleur de la police collectivement pour ajouter un style à la page Web pour le rendre esthétique aux utilisateurs. Une autre fonctionnalité importante utilisée pour appliquer la propriété d'affichage est de mentionner la largeur du corps HTML pour afficher tous les contenus HTML en une seule ligne.

Corps
Largeur: 60%;

Enregistrez le code dans le fichier d'éditeur de texte avec l'extension HTML pour en faire une icône du navigateur qui illustre qu'il s'agit d'une page Web. L'exécuter dans le navigateur. La page Web attendue a une liste de tous les éléments d'une notation verticale s'il n'y a pas de propriété en ligne en ligne.

Mais à la suite de cette propriété CSS d'affichage, nous voyons que tous les éléments de la liste sont affichés en une seule ligne horizontale sans balles. Cela ne ressemble plus à une liste. Mais cela ressemble à un simple paragraphe avec les espaces par défaut entre les mots.

Exemple 2: aucune ligne ne se casse dans div

Tout comme les listes, lorsque la liste est convertie en paragraphe, nous sommes capables d'appliquer l'effet d'affichage sur tout autre contenu HTML. Donc, nous avons choisi un div. Un div est le conteneur qui contient les autres contenus HTML. Tout d'abord, considérons une étiquette Div simple dans laquelle nous n'avons appliqué aucun effet CSS de «pas de rupture de ligne». Mais le div est fourni avec ses styles de base comme le rembourrage et la couleur pour afficher l'existence des deux divs sur la page Web.

Div un

Il en va de même pour le div deux.

Enregistrez le code et exécutez-le dans le navigateur. Vous verrez que deux divs sont affichés verticalement avec les spécifications que nous avons appliquées en tant que CSS en ligne à l'intérieur des balises. Ces divs sont affichés sans aucune rupture entre eux. Comme on le voit dans la sortie, les deux divs sont attachés.

Chaque fois qu'une div ou une table est utilisée dans le HTML, ils en sont tous deux les deux après l'autre dans une direction verticale comme nous avons représenté. En effet. En utilisant le phénomène «No Line Break», nous subissons quelques modifications du code.

Tout d'abord, nous appliquons la propriété d'affichage avec la propriété en bloc en ligne aux deux divs dans CSS.

Div
Affichage: bloc en ligne;

De plus, nous devons réduire la largeur du corps du HTML afin que les deux divs puissent s'adapter à la taille donnée du corps.

Corps
Largeur: 30%;

Lors de l'exécution, vous verrez que les deux divs que nous avons déclarés ont utilisé la propriété CSS «No Line Break» de l'affichage.

Façons supplémentaires:

Certaines informations supplémentaires concernant la propriété de la «rupture de ligne» s'accompagnent de via les balises HTML sans utiliser séparément les balises CSS.

Une façon consiste à utiliser la chaîne & # 160. L'utilisation de cette chaîne entre deux chaînes provoque un espace en les faisant rester sur la même ligne au lieu d'utiliser un
Tag qui mène à la ligne suivante. L'opérateur et (&) est utilisé à des fins de liaison.

123 & # 160

Une autre façon de faire un écart entre deux cordes est que HTML utilise une fonctionnalité intégrée «NBSP» ou «l'espace non révolutionnaire». Nous utilisons le NBSP entre deux nombres. Les résultats auront un espace.

456

Maintenant, lors de l'exécution, vous verrez l'espace entre ces trois nombres sans utiliser la pause de ligne.

Conclusion

L'article CSS «No Line Break» explique l'utilisation des propriétés de CSS et HTML autres que l'effet de rupture qui est appliqué via la balise de rupture HTML
. Au début, nous avons fait une simple introduction sur HTML et CSS. La propriété qui est principalement responsable de l'effet «sans rupture de ligne» est expliquée comme la propriété d'affichage en ligne en ligne. Nous avons expliqué l'utilisation de l'affichage du bloc en ligne dans les listes HTML et les conteneurs Div à travers des exemples. De plus, certaines informations supplémentaires concernant ce sujet sont également ajoutées.