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