web-dev-qa-db-fra.com

Comment couper les lignes à partir de CSS sans utiliser <br />?

sortie:

salut
Comment vas-tu

code:

<p>hello <br> How are you </p>

Comment obtenir le même résultat sans <br>?

htmlcsscss3
361
Jitendra Vyas

Impossible avec la même structure HTML, vous devez avoir quelque chose à distinguer entre Hello et How are you.

Je suggère d'utiliser spans que vous afficherez ensuite sous forme de blocs (tout comme un <div> en fait).

HTML:

<p><span>hello</span><span>How are you</span></p>

CSS:

p span 
{
    display: block;
}
348
Vincent Robert

Vous pouvez utiliser white-space: pre; pour que les éléments se comportent comme <pre>, ce qui préserve les nouvelles lignes. Exemple:

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

Notez que cela ne fonctionne pas dans IE6 ou IE7. Je ne sais pas pour IE8.

309
Joey Adams

Utilisez <br/> comme d'habitude, mais masquez-le avec display: none lorsque vous ne le souhaitez pas.

Je m'attendrais à ce que la plupart des personnes découvrant cette question veuillent utiliser css/responsive design pour décider si un saut de ligne apparaît ou non à un endroit spécifique. (et n'avez rien de personnel contre <br/>)

Bien que cela ne soit pas immédiatement évident, vous pouvez réellement appliquer display:none à une balise <br/> pour la masquer, ce qui permet d'utiliser des requêtes multimédia en tandem avec des balises BR sémantiques.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em) 
 {
    br 
    { 
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

Ceci est utile en conception réactive où vous devez forcer le texte en deux lignes à la pause exacte.

http://jsfiddle.net/nNbD3/1/

111
Simon_Weaver

Il existe plusieurs options pour définir le traitement des espaces et des sauts de ligne. Si on peut mettre le contenu dans, par exemple, une balise <p> il est assez facile d'obtenir ce que l'on veut.

Pour conserver les sauts de ligne mais pas les espaces blancs utilisez pre-line (et non pre) comme dans:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Si un autre comportement est souhaité, choisissez-en un parmi ceux-ci (WS = WhiteSpace, LB = LineBreak):

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

SOURCE: W3 Schools

92
petermeissner

La commande "\ a" en CSS génère un retour à la ligne. Il s’agit de CSS, et non de HTML, il sera donc plus proche de ce que vous voulez: pas de balisage supplémentaire .

Dans une citation de bloc, l'exemple ci-dessous affiche à la fois le titre et le lien source et sépare les deux avec un retour à la ligne ("\a"):

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}
63
David Latapie

Au CSS utiliser le code

p {
    white-space: pre-line;
}

Avec ce code css, chaque entrée dans la balise P sera une ligne de rupture au format HTML.

29
burunoh

S'appuyant sur ce qui a été dit auparavant, il s'agit d'une solution CSS pure qui fonctionne.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>
27
cruzanmo

Pour qu'un élément ait un saut de ligne après, affectez-le:

display:block;

Les éléments non flottants après un élément de niveau bloc apparaîtront sur la ligne suivante. De nombreux éléments, tels que <p> et <div>, sont déjà des éléments de niveau bloc, vous pouvez donc simplement les utiliser.

Mais bien que ce soit bon à savoir, cela dépend davantage du contexte de votre contenu. Dans votre exemple, vous ne voudriez pas utiliser CSS pour forcer un saut de ligne. <br /> est approprié car la balise p est la plus appropriée pour le texte que vous affichez. Plus de balisage juste pour suspendre CSS est inutile. Techniquement, ce n'est pas exactement un paragraphe, mais il n'y a pas de balise <greeting>, utilisez donc ce que vous avez. Décrire votre contenu avec HTMl est bien plus important - après que vous ayez cela alors voyez comment le rendre joli.

9
Syntax Error
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

OR

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

source: https://stackoverflow.com/a/36191199/237734

9
T.Todua

Voici une mauvaise solution à une mauvaise question, mais qui répond à la lettre:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}
7
Alohci

Pour une liste de liens

Les autres réponses fournissent de bons moyens d’ajouter des sauts de ligne, en fonction de la situation. Mais il convient de noter que le sélecteur :after est l’un des meilleurs moyens de le faire pour contrôle CSS sur les listes de liens (et des choses similaires), pour les raisons indiquées ci-dessous.

Voici un exemple, en supposant une table des matières:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Et voici la technique de Simon_Weaver, qui est plus simple et plus compatible. Cela ne sépare pas autant le style et le contenu, nécessite plus de code et il peut arriver que vous souhaitiez ajouter des pauses après coup. Encore une bonne solution, surtout pour les anciens IE.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Notez les avantages des solutions ci-dessus:

  • Peu importe les espaces dans le code HTML, le résultat est le même (vs pre)
  • Aucun remplissage supplémentaire n'est ajouté aux éléments (voir les commentaires display:block de NickG)
  • Vous pouvez facilement basculer entre des listes de liens horizontales et verticales avec certains CSS partagés sans entrer dans tous les fichiers HTML pour un changement de style.
  • Aucun style float ou clear n'affectant le contenu environnant
  • Le style est distinct du contenu (c.-à-d. <br/> ou pre avec des sauts codés en dur)
  • Cela peut également fonctionner pour les liens desserrés avec a.toc:after et <a class="toc">
  • Vous pouvez ajouter plusieurs pauses et même du texte préfixe/suffixe
5
Beejor

Définir une balise br sur display: none est utile, mais vous pouvez alors vous retrouver avec WordsRunTogether. J'ai trouvé plus utile de le remplacer par un espace, comme ceci:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}
4
Bryan

Peut-être que quelqu'un aura le même problème que moi:

J'étais dans un élément avec display: flex et j'ai donc dû utiliser flex-direction: column.

4
Dorian

Qu'en est-il de la balise <pre>?

source: http://www.w3schools.com/tags/tag_pre.asp

3
stephan

Vous pouvez ajouter beaucoup de remplissage et forcer le texte à être divisé sur une nouvelle ligne, par exemple

p{
    padding-right: 50%;
}

Cela a bien fonctionné pour moi dans une situation de conception réactive, dans laquelle le fractionnement du texte n’était nécessaire que dans une certaine plage de largeur.

2
Alexxandar

Utiliser &nbsp; au lieu d'espaces empêchera une pause.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>
1
JPB

Utilisez overflow-wrap: break-Word; comme :

.yourelement{
overflow-wrap: break-Word;
}
1
Den Pat

Si cela aide quelqu'un ...

Vous pourriez faire ceci:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Avec ce css:

a.on-new-line:before { 
  content: '&nbsp;'; 
  font-size:0; 
  display:block;
  line-height:0;
}
0
Jay

Cela fonctionne dans Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}
0
Andi Giga

Dans mon cas, j'avais besoin d'un bouton de saisie pour avoir un saut de ligne avant.
J'ai appliqué le style suivant au bouton et cela a fonctionné:

clear:both;
0
Gene Bo

J'imagine que vous ne vouliez pas utiliser de point d'arrêt car cela coupera toujours la ligne. Est-ce exact? Si c'est le cas, pourquoi ne pas ajouter un point d'arrêt _<br />_ dans votre texte, puis lui attribuer une classe telle que _<br class="hidebreak"/>_ puis utiliser une requête multimédia juste au-dessus de la taille à briser pour masquer le _<br />_ casse à une largeur spécifique mais reste en ligne au-dessus de cette largeur.

HTML:

_<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>
_

CSS:

_@media (min-width: 767px) {
  br.hidebreak {display:none;}
}
_

https://jsfiddle.net/517Design/o71yw5vd/

0
Krankit

J'aime les solutions très simples, en voici une de plus

<p>hello <span>How are you</span></p>

et css

p {
 display: flex;
 flex-direction: column;
}
0
Jarek

Vous devez déclarer le contenu dans <span class="class_name"></span>. Après cela, la ligne sera rompue.

\A signifie un caractère de saut de ligne.

.class_name::after {
  content: "\A";
  white-space: pre;
}
0
Jacek Krawczyk

Les réponses de Vincent Robert et de Joey Adams sont toutes les deux valables. Si vous ne voulez pas, cependant, changer le balisage, vous pouvez simplement insérer un <br /> en utilisant javascript.

Il n'y a aucun moyen de le faire en CSS sans changer le balisage.

0
e-satis