Discussion :

[NewUserDelphi]

Bonjour

Dit comme cela mon pb est des plus simples à résoudre mais non, helas !

Pour être plus précis j'ai une div qui fait 50% de largeur.
Dedans j'affiche un texte dont le fond est de couleur.
Le texte est long et il s affiche sur plusieurs lignes.

Le pb est que le fond de couleur s arrête immédiatement après le dernier caractère d'une ligne.
Si je mets un padding-right, c est le dernier caractère de la phrase qui en profite mais pas le dernier caractère de la ligne.

pour y remédier j'affiche un ' ' après le dernier caractère de la ligne mais si je redimensionne mon écran, cet espace n est plus au bon endroit et c est un autre caractère qui pose problème....

j'aimerais donc pouvoir faire en sorte que le premier et dernier caractère de chaque ligne soient un espace afin d harmoniser l affichage.

Est il possible d y remédier avec du jquery ?

merci de votre aide.

[psychadelic]

t'a du rate un truc, mais quoi ?
Comme on peut pas deviner si tu montre pas un minimum de code, on peut pas y réfléchir et te chercher une réponse, alors ça peut pas te donner de solution.
Question de logique, non ?

[NewUserDelphi]

Ok mais le code...je pense pas que ça aide là, il est tout basique :
La premiere ligne c est ce que j obtiens et la seconde c est ce que je désire étant entendu que les ' ' sont ici seulement pour ma taille d'ecran.

Code html :

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

1
2
<span class="lime titre">Comment ça marche cette chose</span>
<span class="lime titre">&nbsp;Comment ça&nbsp;  &nbsp;marche cette&nbsp; &nbsp;chose&nbsp;</span>

les classes :
lime : c est les couleurs de fond et de texte
titre : c est la font et taille de la police.

Par contre peut etre qu une image serait plus claire:
Ce que j obtiens:

ce que je désire:


Pour le premier et dernier espace je peux ajouter un padding mais pour le reste ???

[psychadelic]

et y a quoi dans les classes lime et titre ?

normalement utiliser un padding devrait faire l'affaire, qu'est-ce que ça donne comme info css sur le debugger ?

[NewUserDelphi]

Code css :

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

1
2
3
4
5
6
7
8
9
10
lime {
    background: #d4cb0e  !important
}
.titre {
    font-family: 'Open Sans SemiBold';
   line-height: 1.9em;
    font-size: 2.5em;
    color:#1e525d !important;
    text-transform: uppercase
}

Pour ce qui est du padding il ne s'ajoute qu'avant le 1er caractere et apres le dernier, pas quand et où la ligne est scindée.

Par contre dsl mais je ne comprends pas ta question "qu'est-ce que ça donne comme info css sur le debugger ?"
C'est de ça dont tu veux parler ?

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
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(212, 203, 14);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
box-sizing: border-box;
color: rgb(30, 82, 93);
display: inline;
font-family: "Open Sans SemiBold";
font-size: 37.5px;
height: auto;
line-height: 71.25px;
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
text-size-adjust: 100%;
text-transform: uppercase;
width: auto;

[psychadelic]

tous les navigateurs on un mode debug. on l'ouvre en utilisant la touche F12 une fenetre s'affiche et permet de "voir" l'ensemble des information concernant chaque page, y compris les valeurs css attribuées sur chaque élément

Ajouter ces propriétés au css devrait être ta réponse ( pas besoin d'ajouter des espaces insécables dans tes libellés)

Code CSS :

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

1
2
3
4
5
6
7
8
9
.titre {
    font-family: 'Open Sans SemiBold';
   line-height: 1.9em;
    font-size: 2.5em;
    color:#1e525d !important;
    text-transform: uppercase,
   padding-left:1em;
   padding-right:1em;
}

[NewUserDelphi]

Merci de t'être penché dessus mais hélas non cela ne fonctionne que pour le premier et dernier caractère car la ligne est scindée. Si j affichais sur 2 lignes ok mais là non comme tu peux le voir.

[NoSmoking]

Bonjour,
tu n'as pas bien de recours attendu que tu vas à contre courant du comportement normal d'un élément inline.

Comme tu l'as entrevu dans ton code posté ci dessus

<span class="lime titre">&nbsp;Comment ça&nbsp; &nbsp;marche cette&nbsp; &nbsp;chose&nbsp;</span>

il te faut utiliser des espaces insécables &nbsp;.
Pour un « meilleur rendu » il vaut mieux en mettre avant et après plutôt que d'utiliser un padding, qui est plus a mettre sur le conteneur, comme dans ton exemple.

Est il possible d y remédier avec du jquery ?

jQuery ou pas, si tu veux le faire automatiquement tu peux « splitter » le innerHTML des éléments et ajouter automatiquement les &nbsp;.
Quelque chose comme

Code :

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

1
2
3
4
5
6
7
var elems = document.querySelectorAll(".titre");
var s = " ";
var html;
elems.forEach(function(el) {
  html = el.innerHTML.split(/\s/);
  el.innerHTML = s + html.join(s + " " + s) + s;
});

Un ajustement de la largeur du &nbsp; est faisable avec la propriété CSS word-spacing, exemple :

Code css :

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

1
2
3
4
5
6
7
.titre {
  text-transform: uppercase;
  font-size: 2.5em;
  line-height: 2;
  word-spacing: -8px;   /* à ajuster */
  color: #1E525D;
}

Tu ne devrais pas être loin du rendu que tu souhaites.

[Watilin]

À mon humble avis, c’est un casse-tête de devoir ajouter des &nbsp; tous azimuts, sachant qu’il faut recommencer toute l’opération quand on change le texte.

Pour moi ça devrait être un problème de pur CSS, mais peut-être que la solution propre n’existe pas encore. J’ai fait quelques recherches et j’ai trouvé des trucs qui s’approchent, mais rien qui réponde exactement au besoin :

• Force single line of text in element to fill width with CSS
• Multi-line padded text
• box-decoration-break

[NewUserDelphi]

Merci à vous.

Effectivement cela semblait plus un pb de css d ailleurs j ai opté pour la solution expliquée dans un lien (https://css-tricks.com/multi-line-padded-text/) et detaillée ici

https://codepen.io/hotmeteor/pen/ibvJs

Merci encore car je n en voyais pas le bout