Étirer le texte pour l'adapter à la largeur de la division

Question

J'ai un div avec une largeur fixe, mais le texte à l'intérieur du div peut changer.

Existe-t-il un moyen de définir, à l'aide d'une css ou autre, l'espacement entre les éléments suivants lettres pour que le texte remplisse toujours parfaitement le div ?

Answer 1

J'arrive un peu tard dans la soirée, mais pour une mise en œuvre simple et pure de CSS, pensez à utiliser flexbox :

h1.stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<h1 class="stretch">
  <span>F</span>
  <span>o</span>
  <span>o</span>
  <span>B</span>
  <span>a</span>
  <span>r</span>
</h1>

Je ne suis pas sûr que le fait d'envelopper chaque lettre dans un span (n'importe quel élément peut fonctionner) peut nuire au référencement, mais j'imagine que les moteurs de recherche supprimeront les balises de l'élément innerHTML de balises utilisées pour le balisage important comme les titres, etc. (Quelqu'un qui connaît le référencement peut confirmer ?)

Answer 2

MARS 2018 Si vous atterrissez sur cette question à une époque plus actuelle...

J'ai essayé de faire ce que l'OP demandait mais avec un seul mot et j'ai réussi avec ce qui suit :

1. Utilisez un <span> et définir le css : span { letter-spacing: 0px; display:block} (l'élément est alors aussi large que le contenu).

2. Capture de la largeur de la travée en cas de charge let width = $('span').width();

3. Saisir la longueur de la travée let length = $('span').length;

4. Réinitialiser la largeur du span au conteneur $('span').css({'width','100%'});

5. Capturez la NOUVELLE largeur du span (ou utilisez simplement la largeur du conteneur). let con = $('span').width();

6. Calculer et définir l'espacement des lettres pour remplir le conteneur $('span').css({'letter-spacing':(cont-width)/length})

Il est évident que cette méthode peut être convertie pour utiliser des js vanilles et qu'elle est utile même avec la plupart des styles de polices, y compris les polices non mono-espacées.

Answer 3

Certaines des réponses ci-dessus fonctionnent bien, mais le texte doit être enveloppé par plusieurs enfants. div
et c'est beaucoup de codes supplémentaires.
Le texte à l'intérieur du div doit être propre, donc je l'ai fait avec l'aide de JS.

const words = document.querySelector(".words"),
  wordsArray = words.innerText.split("").map(e => " " == e ? "<div>&nbsp</div>" : "<div>" + e + "</div>");
words.innerHTML = wordsArray.join("");

.words {
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

<div class="words">This is the demo text</div>

Answer 4

Je pense que ce que vous cherchez en fait, c'est une mise à l'échelle.

Rendez votre police avec une résolution agréable qui a du sens, puis utilisez JS pour l'adapter au conteneur en utilisant les transformations css :

transform: scale(1.05);

L'avantage est que votre texte sera toujours adapté, mais vous risquez qu'il devienne trop petit pour être lisible.

Une remarque rapide : vous devez faire en sorte que l'élément que vous essayez de réduire/étendre ait une position absolue :

position: absolute;

Answer 5

Si quelqu'un est intéressé par la façon de justifier le contenu et de centrer uniquement la dernière ligne, vous pouvez utiliser la méthode suivante

text-align: justify;
text-align-last: center;

voir l'exemple :

.custom-justify{
   text-align: justify;
   text-align-last: center;
   padding: 0 10px 0 10px;
}

<div class="custom-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis elementum bibendum. Cras pellentesque sed augue nec lacinia. Duis at eros vel lorem cursus laoreet ac vel justo. Maecenas ornare, ligula ut porttitor sollicitudin, turpis urna auctor ipsum, a consectetur felis nibh vel est. Nullam id lorem sit amet magna mollis iaculis eu vitae mauris. Morbi tempor ut eros ut vulputate. Quisque eget odio velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed posuere enim tellus, ut vestibulum libero dapibus ac. Nulla bibendum sapien non luctus vehicula. Aenean feugiat neque nunc, in fermentum augue posuere vel. Maecenas vitae diam in diam aliquet aliquam.<div>