web-dev-qa-db-fra.com

Qu'en est-il des sauts de ligne en Jade?

Je suis à peu près sûr que c'est une évidence, mais je n'ai trouvé aucun extrait de code exemple… .. Quelle est la meilleure façon d'insérer des sauts de ligne (le bon vieux)?

Autant que je sache, si je mets un "br" au début d'une ligne vide, il est rendu sous la forme <br/>, mais si je dois afficher plusieurs lignes de texte, le code résultant est assez détaillé:

.poem 
    p 
        | Si chiamava Tatiana, la sorella… 
        br 
        | Noi siamo i primi, almeno lo crediamo
        br 
        | Che un tale nome arditamente nella
        br 
        | Cornice d’un romanzo introduciamo.
        br 
        | E che dunque? E’ piacevole, sonoro.
        br 
        | Lo so che a molti privo di decoro 
        br 
        | Apparirà, già fuori moda, e degno
        br 
        | Piuttosto d’un ancella, certo segno, 
        br 
        | confessiamolo pur senza paura,
        br 
        | di quanto s’è noialtri al gusto avversi
        br 
        | nei nostri nomi (a non parlar di versi). |br
        br 
        | Credemmo conquistare la cultura,
        br 
        | e non ne abbiamo preso, in conclusione,
        br 
        | che la ricerca Dell’affettazione.

Existe-t-il un meilleur moyen de résoudre ce problème? (Incidemment, je demande la même chose avec la balise image ...)

node.jspug
63
Matteo

La solution la plus simple et la plus simple consiste à utiliser l'attribut de style white-space: pre;, par exemple:

.poem 
    p(style='white-space:pre;')
        | Si chiamava Tatiana, la sorella… 
        | Noi siamo i primi, almeno lo crediamo
        | Che un tale nome arditamente nella
        | Cornice d’un romanzo introduciamo.
        | E che dunque? E’ piacevole, sonoro.
        | Lo so che a molti privo di decoro 
        | Apparirà, già fuori moda, e degno
        | Piuttosto d’un ancella, certo segno, 
        | confessiamolo pur senza paura,
        | di quanto s’è noialtri al gusto avversi
        | nei nostri nomi (a non parlar di versi). |br
        | Credemmo conquistare la cultura,
        | e non ne abbiamo preso, in conclusione,
        | che la ricerca Dell’affettazione.
54
Daniel Baulig

Je l'ai compris. Allez-y, jetez-y une bonne vieille étiquette <br />. Tu seras doré:)

p
 |hey this is my <br />
 |broken paragraph!

UPDATE: Jade prend désormais en charge l’utilisation de br pour les sauts de ligne. 

50
Hacknightly

pour que vous sachiez que si vous extrayez ces informations, par exemple, dans une base de données SQL dans laquelle vous avez déjà entré manuellement des sauts de ligne (par exemple, dans la zone de texte d'un formulaire), vous pouvez effectuer les opérations suivantes sur le serveur: votre sortie

var contentParse = function(content){
    content = content.replace(/\n?\r\n/g, '<br />' );
    return content;
};

puis en jade

!{content}

la ! permet à Jade de savoir que vous insérez du code HTML brut dans la variable que vous essayez de rendre

source: https://github.com/visionmedia/jade#tag-text

6
haxxxton

robustement avec un div par ligne:

p.poem 
  .line Si chiamava Tatiana, la sorella… 
  .line Noi siamo i primi, almeno lo crediamo
  .line Che un tale nome arditamente nella
  .line Cornice d’un romanzo introduciamo.
  .line E che dunque? E’ piacevole, sonoro.
  .line Lo so che a molti privo di decoro 
  .line Apparirà, già fuori moda, e degno
  .line Piuttosto d’un ancella, certo segno, 
  .line confessiamolo pur senza paura,
  .line di quanto s’è noialtri al gusto avversi
  .line nei nostri nomi (a non parlar di versi).
  .line Credemmo conquistare la cultura,
  .line e non ne abbiamo preso, in conclusione,
  .line che la ricerca Dell’affettazione.

ou simplement avec un pré:

style pre.poem {font-family: ariel}

pre.poem 
  Si chiamava Tatiana, la sorella… 
  Noi siamo i primi, almeno lo crediamo
  Che un tale nome arditamente nella
  Cornice d’un romanzo introduciamo.
  E che dunque? E’ piacevole, sonoro.
  Lo so che a molti privo di decoro 
  Apparirà, già fuori moda, e degno
  Piuttosto d’un ancella, certo segno, 
  confessiamolo pur senza paura,
  di quanto s’è noialtri al gusto avversi
  nei nostri nomi (a non parlar di versi). 
  Credemmo conquistare la cultura,
  e non ne abbiamo preso, in conclusione,
  che la ricerca Dell’affettazione.
5
generalhenry

Cela ne semble pas être une réponse, alors:

Vous pouvez également le faire en ajoutant des balises br en utilisant le format de balise inline de Jade/Pug,

p.
    Some text on the first line.#[br]
    Some text on the second line.

Produit:

  <p>Some text on the first line.<br>
    Some text on the second line.
  </p>
5
Jason C

Donnez à votre paragraphe un style pour conserver les nouvelles lignes et terminer la ligne p par un point:

.poem 
  p(style="white-space: pre-line;").
    Si chiamava Tatiana, la sorella… 
    Noi siamo i primi, almeno lo crediamo
    Che un tale nome arditamente nella
    Cornice d’un romanzo introduciamo.
    E che dunque? E’ piacevole, sonoro.
    Lo so che a molti privo di decoro 
    Apparirà, già fuori moda, e degno
    Piuttosto d’un ancella, certo segno, 
    confessiamolo pur senza paura,
    di quanto s’è noialtri al gusto avversi
    nei nostri nomi (a non parlar di versi).
    Credemmo conquistare la cultura,
    e non ne abbiamo preso, in conclusione,
    che la ricerca Dell’affettazione.
0
Oliver Kötter

Juste au cas où vous n’auriez pas utilisé le filtre année lors de la première recherche: Comment ajouter une balise br avec Jade HTML

Placez le texte sur une nouvelle ligne avec un | | précédent

p first line
br
| second line
0
Giuseppe Leo

J'ai pu faire ce qui suit après @haxxxton

app.use(function(req, res, next){
  var contentParse = function (content){
      content = content.replace(/\n?\r\n/g, '<br />' );
      return content;
  };
  res.locals.contentParse = contentParse;
  next();
});

Par exemple, il peut être utilisé dans un modèle de jade à l’aide de la fonction p!= contentParse(post.description) 

0
yolk

cela fonctionne aussi bien.

div
   pre
      | this is line 1
      | this is line 2
0
Krone