28106 sujets

CSS et mise en forme, CSS3

Bonjour / Bonsoir;

je cherche une propriété css afin d'arriver a remplir une largeur fixe (ex: widht: 300px;) avec du texte. L'idée est d'avoir un H1 et un H2, les un en dessous des autres mais avec une largeur identique. Peut-etre en "écrasant", "étirant", "agrandissant" ?


<h1>titre du texte</h1>
<h2>texte1 - texte2 - texte3 - texte4</h2>


j'ai déjà essayé :

    h1 {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      min-width: 300px;
   }



    h2 {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      min-width: 300px;
   }


mais rien n'y fait, le text ne "s'étire" par jusqu'au bout des 300px.

autres tests: placer de l'espace entre les lettres avec "letter-spacing:", width, widht max, flex box fans tous les sens, ...
Avez-vous une solution ? Smiley smile Smiley eek

Merci
Modérateur
Bonjour,

Quand vous parlez de "largeur identique", vous parlez de l'occupation du texte ou de leurs conteneurs respectifs ?

Dans le premier cas, Kustolovic vous indique LA solution. Mais si le nombre de caractère est trop différent l'affichage risque d'en être fort disgracieux (très, pour ne pas dire tout le temps, on évite les textes justifiés sur le web).

Dans ce second cas vous constaterez que les conteneurs ont la même taille:
<h1>Les Baleines A Bosses</h1>
<h2>Un mode de reproduction atypique</h2>

<style>
h1,
h2 {
  display: block;
  width: 300px;
}
h1 {
  background-color: azure;
}
h2 {
  background-color: lime;
}
</style>


Smiley langue
Modifié par Greg_Lumiere (06 Feb 2018 - 08:48)
J'ai directement été voir sur https://caniuse.com/, j'essaye d'avoir ce réflexe le plus souvent possible.
Mais à mon niveau, c'est vraiment la finition, de la finition. Je pense que je peux "accepter" le faite qu'il ne soit pas supporter partout.
Merci du retour Smiley smile