Ajouter un espace en fin de ligne.

Version imprimable

30/04/2019, 14h27
NewUserDelphi

Ajouter un espace en fin de ligne.

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.
30/04/2019, 14h44
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 ?
30/04/2019, 15h08
NewUserDelphi

2 pièce(s) jointe(s)
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:

1 2 Comment ça marche cette chose  Comment ça   marche cette   chose 
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:
Pièce jointe 470967
ce que je désire:
Pièce jointe 470968

Pour le premier et dernier espace je peux ajouter un padding mais pour le reste ???
30/04/2019, 15h33
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 ?

Code:

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:

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;

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:

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; }

30/04/2019, 17h12
NewUserDelphi

1 pièce(s) jointe(s)

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.

Pièce jointe 471027
30/04/2019, 20h11
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

Citation:

 Comment ça   marche cette   chose 

il te faut utiliser des espaces insécables  .
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.

Citation:

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  .
Quelque chose comme
Code:

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   est faisable avec la propriété CSS word-spacing, exemple :
Code:

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.
30/04/2019, 21h07
Watilin
À mon humble avis, c’est un casse-tête de devoir ajouter des   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 :
01/05/2019, 00h40
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 :D