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

J'ai l'impression d'avoir vu un moyen, en utilisant la propriété CSS content, 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?

Il est possible d'utiliser la \A séquence d'échappement dans le contenu généré par l'élément psuedo. En savoir plus dans la spécification CSS2.

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

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

Remarque: \Aindique la fin d'une ligne.

ps Un autre traitement à être

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

S'il #restarts'agit d'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 un saut de ligne avant et après l'élément.

Il n'y a pas de moyen pour CSS d'insérer quelque chose qui agit comme un saut de ligne uniquement avant un élément et non après. Vous pourriez peut-être provoquer un saut de ligne avant comme effet secondaire d'autres changements, par exemple float: left, ou clear: leftaprès un élément flottant, ou même quelque chose de fou comme #restart:before { content: 'a load of non-breaking spaces'; }mais ce n'est probablement pas une bonne idée dans le cas général.

Cela fonctionne pour moi:

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

Mettez simplement un caractère de nouvelle ligne Unicode dans le pseudo élément avant:

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

Suivre CSS a fonctionné pour moi:

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

Il y a deux raisons pour lesquelles vous ne pouvez pas ajouter de contenu généré via CSS comme vous le souhaitez:

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

2. :beforeet le :aftercontenu généré est ajouté dans l'élément, donc même ajouter un espace ou une lettre et le définir comme blockne fonctionnera pas.

Il existe un ::outsidepseudo élément qui pourrait faire ce que vous voulez. Cependant, il ne semble y avoir aucune prise en charge du navigateur. (En savoir plus ici: http://www.w3.org/TR/css3-content/#wrapping )

Le mieux est d'utiliser un peu de jQuery ici:

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

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

Oui, tout à fait faisable, mais c'est définitivement un hack total (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/

Essayez ce qui suit:

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

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

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

Je n'ai eu aucune chance d'insérer une pause avec: avant. Ma solution était d'ajouter un span avec une classe et de mettre le break à l'intérieur du span. Puis changez la classe pour afficher: aucun; 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.

Vous pouvez remplir votre document avec des <br>balises et les activer / désactiver avec css comme tous les autres:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

Vous pouvez également utiliser l'entité HTML pré-encodée pour un saut de ligne 
dans votre contenu et cela aura le même effet.

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 The Content Proerty, "newlines" ... p n'ajoutera pas de marge ni de remplissage à la fin de p à l'intérieur du bloc parent (par exemple, corps ›section› p). Le saut de ligne "\ A" force l'espace de ligne, hauteur de ligne stylisée équivalente.

Ajouter un margin-top:20px;à #restart. Ou quel que soit l'écart de taille que vous jugez approprié. Si c'est un élément en ligne, vous devrez ajouter display:blockou display:inline-blockbien que je ne pense pas qu'il inline-blockfonctionne sur les anciennes versions d'IE.

Au lieu d'ajouter manuellement un saut de ligne d'une manière ou d'une autre, vous pouvez faire une implémentation border-bottom: 1px solid #ff0000qui prendra la bordure de l'élément et ne restituera border-<side>que le côté que vous spécifiez.