Discussion :

[Gluups]

Bonjour tout le monde,

Un champ de base de données, affiché dans un paragraphe (p) comporte plusieurs lignes.
Pour le rendu, la seule chose que j'aie trouvée, c'est style="text-wrap:pre-line".

Ça marche, mais ça ajoute un saut de ligne au début du texte.

Qui dit mieux ?

[NoSmoking]

Bonjour,

Ça marche, mais ça ajoute un saut de ligne au début du texte.

Je vois apriori au moins deux raisons :

• le saut de ligne ne question est présent dans le texte inséré ;
• il ne s'agit pas d'un saut de ligne mais de la marge haute de l'élément <p>, voire une « fusion de marge ».

Mais difficile d'en dire plus sans le contexte d'insertion !

[Gluups]

J'ai bien pensé à ça, mais j'ai vérifié :

• pour l'élément du dessus : margin-bottom:0;padding-bottom:0;
• pour l'élément du dessous: margin-top:0; padding-top: 0;
• si je mets un style différent (comme white-space:pre-wrap) il n'y a pas d'espace entre les deux ; en revanche les sauts de lignes ne sont pas marqués dans le champ

C'est dans un site MVC qui présente les appréciations sur un restaurant. Depuis j'ai ajouté l'appréciation numérique (strScore est constitué de une à cinq étoiles) ce qui alourdit un peu la mise en page, avant il y avait seulement le titre suivi du texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	<div style="margin-bottom:0;">
		<table>
			<tr>
				<td>
					<label style="font-size:36px;min-width:80px;">@strScore </label>
				</td>
				<td style="font-size:28px">
					@item.Titre
				</td>
			</tr>
		</table>	 
	</div>
	<p style="white-space:pre-line;margin-top:0;">
		@item.Texte
	</p>

Par acquit de conscience :

• J'ai mis une bordure à la table (qui est apparue depuis que j'ai posé la question) pour mieux visualiser ce qui se passe entre deux
• Dans le code j'ai remplacé @item.Texte par @item.Texte.Trim() ce qui supprime les espaces en tête de champ
• J'ai ajouté un caractère ">" devant le texte. Le saut de ligne ne se trouve pas entre ce caractère et le texte, mais entre la table et ce caractère

Il y a un espace entre la table et le texte si le texte a le style white-space:pre-line, pas si il a le style white-space:pre-wrap. Mais white-space:pre-wrap masque les sauts de ligne dans le texte.

Exemple :

[NoSmoking]

Dans ton cas, le fautif est un « whitespace » qui traine entre ta balise <p> et le début de ton texte.
Il ne faut donc pas écrire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p style="white-space:pre-line;margin-top:0;">
	@item.Texte
</p>

mais :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p style="white-space:pre-line;margin-top:0;">@item.Texte</p>

tout sur la même ligne, sans retour à la ligne qui est interprété dans le cas des déclarations suivantes :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
white-space: break-spaces;
white-space: pre;
white-space: pre-line;
white-space: pre-warp;

Nota :

• l'élément <div> autour de la <table> est inutile ;
• l'élément <label> n'est pas plus utile ;
• le style inline très c'est moyen.

[Gluups]

Ah je ne l'ai pas vue venir, celle-là.
Effectivement, ça marche, merci.

***
Pour la petite histoire, après on a des marges en bas de la table qui ne sont pas faciles à gérer (on peut avoir des marges intérieures et extérieures au niveau de la cellule, de la ligne, de la table).
Alors j'ai utilisé du float et après il y avait encore un peu de mise au point à faire.
Ça donne ça, je me demande même si je n'ai pas poussé un peu loin le bouchon, je pourrais remettre une marge, exprès cette fois.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	<div style="margin-bottom:0;padding-bottom:0;max-height:33px;">
		<div style="float:left;width:80px;font-size:42px;line-height:0.8;margin-top:7px;height:20px;">@strScore</div>
		<div style="float:left;margin-left:82px;font-size:28px;margin-bottom:0;line-height:0.8;margin-top:5px;">@item.Titre</div><br />
		<div style="clear:both;height:0;text-align:right;"></div>
	</div>
	<p style="white-space:pre-line;margin-top:0;">@item.Texte</p>

[NoSmoking]

Je serais parti sur une structure HTML^(*) bien plus simple comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="comment">
  <div class="comment-score">@strScore</div>
  <div class="comment-title">@item.Titre</div>
  <div class="commment-text">@item.Texte</div>
</div>

après il est toujours plus facile d'obtenir via le CSS quelque chose de tout à fait convenable.

^(*)voire même peut-être avec une <dl>.

[Gluups]

Si la même chose était à utiliser ailleurs sur le site, bien sûr il valait mieux passer par la feuille de style.

[NoSmoking]

Il existe les balises <style></style> où il serait plus judicieux de placer le « CSS particulier », c'est à mon sens une bonne habitude à prendre que de séparer le CSS du HTML !

[Gluups]

Ce n'est pas ça que j'ai fait ?

[NoSmoking]

Ben non, tu places le style dans la balise HTML.

Je parlais plutôt de structurer de la façon suivante :

• Dans la partie <head> de ta page tu places un élément <style> dans lequel tu places ton CSS, pour ton exemple cela pourrait être :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.comment {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  padding: .5em;
  border: 1px solid #800;
  background: #FFD;
}
.comment-score {
  flex: 0 0 25%;
  font-size: 1.75em;
  background: #DEF;
}
.comment-titre {
  flex: 1 0 75%;
  font-size: 1.75em;
  font-weight: 700;
  background: #FDE;
}
.comment-text {
  flex: 1 0 100%;
  white-space: pre-line;
  background: #EFD;
}

• et dans ton <body> tu retrouves la structure HTML « clean » soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="comment">
  <div class="comment-score">★★★★</div>
  <div class="comment-titre">Un avis à la noix ?</div>
  <div class="comment-text">C'est un restaurant non ?
  Pas vrai ?
  </div>
</div>

On a bien séparé les couches CSS et HTML, c'est quand même plus lisible !