[Résolu] Largeur fixe, et que le texte le remplit

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 ?

Merci

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>

Modifié par Greg_Lumiere (06 Feb 2018 - 08:48)

J'aurais dit pareil que toi