web-dev-qa-db-fra.com

Comment insérer un saut de ligne avant un élément utilisant CSS

J'ai l'impression que j'ai trouvé un moyen, en utilisant la propriété de contenu CSS, d'insérer une balise de saut de ligne avant un élément. Évidemment cela ne fonctionne pas:

#restart:before { content: '<br/>'; }

Mais comment faites-vous cela?

csscss3
155
mheavers

Il est possible d'utiliser le \Aséquence d'échappement dans le contenu généré par l'élément psuedo. En savoir plus dans les spécifications CSS2.

#restart:before { content: '\A'; }

Vous devrez peut-être aussi ajouter white-space:pre; à #restart.

note: \A indique la fin d'une ligne.

p.s. Un autre traitement à être

:before { content: ' '; display: block; }
246
bookcasey

Si #restart est un élément en ligne (par exemple, <span>, <em> etc.), vous pouvez le transformer en élément de bloc en utilisant:

#restart { display: block; }

Cela aura pour effet d’assurer une rupture de ligne avant et après l’élément.

Il n'y a pas moyen de faire en sorte que CSS insère quelque chose qui se comporte comme un saut de ligne niquement avant un élément et non après. Vous pourriez peut-être provoquer une rupture de ligne avant comme effet secondaire d'autres modifications, par exemple float: left ou clear: left après un élément flottant, ou même quelque chose de fou comme #restart:before { content: 'a load of non-breaking spaces'; } mais ceci n'est pas une bonne idée dans le cas général.

33
bobince

Cela fonctionne pour moi:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}
19
hutorny

Il suffit de mettre un caractère de nouvelle ligne unicode dans le pseudo-élément avant:

#restart:before { content: '\00000A'; }
12
Jesse Kinsman

Il existe deux raisons pour lesquelles vous ne pouvez pas ajouter le contenu généré via CSS de la manière souhaitée:

  1. le contenu généré accepte le contenu et non le balisage. Le balisage ne sera pas évalué mais affiché uniquement.

  2. Le contenu généré par :before et :after est ajouté à l'élément. Par conséquent, même l'ajout d'un espace ou d'une lettre et sa définition en tant que block ne fonctionneront pas.

Il existe un pseudo-élément ::outside qui peut faire ce que vous voulez. Cependant, il semble n'y avoir aucun support de navigateur. (Lire la suite ici: http://www.w3.org/TR/css3-content/#wrapping )

Le meilleur pari est d'utiliser un peu de jQuery ici:

$('<br />').insertBefore('#restart');

Exemple: http://jsfiddle.net/jasongennaro/sJGH9/1/

10
Jason Gennaro

Suivre CSS a fonctionné pour moi:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}
7
rluks

Oui, totalement faisable, mais c’est définitivement un hack (les gens peuvent vous donner des regards sales pour écrire un tel code).

Voici le HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Voici le CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Voici le violon: http://jsfiddle.net/AprNY/

4
hammerbrostime

Essayez ce qui suit:

#restart::before {
  content: '';
  display: block;
}
3
user

en supposant que vous voulez que la hauteur de ligne soit de 20 px

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }
1
Kareem

Je n’ai pas eu la moindre chance d’insérer une pause avec: avant. Ma solution a été d'ajouter une étendue avec une classe et de mettre la pause à l'intérieur de l'étendue. Puis changez la classe pour afficher: none; ou afficher: bloquer au besoin.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

J'espère que cela t'aides.

1
Roger

Vous pouvez remplir votre document avec les balises <br> et les activer\off avec css comme n'importe quel autre:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
1
JackHammer
body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 La propriété de contenu, "nouvelles lignes" ... p n'ajoutera pas de marge ni de remplissage à la fin de p à l'intérieur du bloc parent (par exemple, body ›section› p). "\ A" saute à la ligne oblige l'espace entre les lignes, hauteur de ligne stylée équivalente.

0
Mark Stewart

Vous pouvez également utiliser l'entité HTML pré-encodée pour un saut de ligne &#10; dans votre contenu, ce qui produira le même effet.

0
Henry Gibson