1
votes

Division du paragraphe HTML

Je crée actuellement un site. J'ai un

que je dois diviser pour différentes chaînes.

Voici le code:

<p>
  Lorem ipsum - <strong style="color: red;">something.</strong> 
  Lorem ipsum - <strong style="color:blue">something.</strong>\n
  Lorem ipsum - <strong style="color: black;">something.</strong> 
  More lorem ipsum: <strong style="color: indigo;">pls help.</strong>
  Stackoverflow: <strong style="color: purple;">is cool.</strong>
</p>

Je veux qu'il fasse une nouvelle ligne après chaque balise , mais il en génère un seul ligne. J'ai essayé \ n, mais cela ne fonctionne pas.

Ne me demandez pas non plus de le diviser en 3 ou 4 paragraphes, je ne devrais pas le faire pour ce code.

string html paragraph

3 commentaires

Au fait, le code n'a pas l'air si laid, il a des onglets avant toutes les chaînes, donc StackOverFlow le montre comme ça.

utilisez la balise qui signifie la ligne de rupture

Est-ce que cela répond à votre question? Saut de ligne (comme
) en utilisant uniquement le CSS

5 Réponses :

1
votes

Utilisez comme le suggère Demkovych.

<p>
  Lorem ipsum - <strong style="color: red;">something.</strong><br/>
  Lorem ipsum - <strong style="color:blue">something.</strong><br/>
  Lorem ipsum - <strong style="color: black;">something.</strong><br/>
  More lorem ipsum: <strong style="color: indigo;">pls help.</strong><br/>
  Stackoverflow: <strong style="color: purple;">is cool.</strong><br/>
</p>

0 commentaires

1
votes

La chose la plus simple à faire serait d'avoir une balise après chaque balise forte. Cependant, une meilleure pratique consiste à ajouter ce style dans CSS. La balise p pourrait avoir le style suivant:

p {
    white-space: pre-line;
}

Voir aussi le Documentation MDN pour la propriété white-space .

0 commentaires

0
votes

J'ai trouvé que c'était un problème intéressant et je l'ai développé un peu.

La première étape a été d'ajouter une classe à la balise P, afin que nous puissions différencier et réutiliser le style pour d'autres paragraphes similaires.

Ensuite, en fonction de l'exigence que nous voulons remplacer stylistiquement par dans cette classe de paragraphe seulement, j'ai frappé le pseudo élément :: after sur des balises fortes dans cette classe de paragraphe.

<html>
<head>
<style> 

p.multicolor strong::after { 
 content: "\A";
 white-space: pre; 
}
p.multicolor strong:nth-of-type(5n+1) {
  color: red;
}
p.multicolor strong:nth-of-type(5n+2) {
  color: blue;
}
p.multicolor strong:nth-of-type(5n+3) {
  color: black;
}
p.multicolor strong:nth-of-type(5n+4) {
  color: indigo;
}
p.multicolor strong:nth-of-type(5n) {
  color: purple;
}
</style>
</head>
<body>

<p class="multicolor">
 Lorem ipsum - 
<strong> something</strong>
 Lorem ipsum - 
<strong> something</strong>
Lorem ipsum - 
<strong> something</strong>
More lorem ipsum: 
<strong> pls help.</strong>
Lorem ipsum - 
<strong> is cool.</strong>
Out of colors :
<strong> start over from red </strong>
Continuing : 
<strong> should be blue </strong>
</p> 

</body>
</html>

Ensuite, juste pour le plaisir, j'ai ajouté les couleurs. p>

p.multicolor strong::after { 
 content: "\A";
 white-space: pre; 
}

1 commentaires

LOL la meilleure réponse! Pas seulement
mais quelque chose d'intéressant. Je t'aime Chris Cudmore

1
votes

Au lieu de \ n , utilisez , cela résoudra votre problème. Les gens utilisent \ n sur des langages de programmation tels que C et Python, par exemple.

1 commentaires

Je suis sûr que c'est exactement ce à quoi j'ai déjà répondu il y a une heure!

0
votes

\ n n'est pas pour HTML. Essayez d'utiliser . Comment utiliser:

Bonjour! Comment vas-tu?

Ce qu'il produit:

Hello!
How are you?

0 commentaires