É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

Donc, toujours en grignotant les bords de ce problème, si vous combinez la méthode de Wener réponse qui étire de courtes lignes de texte avec ceci suggestion d'utiliser un élément réel d'un autre fil, vous pouvez faire tout cela sans avoir besoin d'une :after pseudo-classe.

Vous substituez un élément réel et vous le placez après celui que vous voulez justifier. Et cela déclenchera l'alignement justifié de la même manière :

header {
  background-color: #ace;
  text-align: justify;
}

.hack {
  display: inline-block;
  width: 100%;
}

<header>
  <div>
    A line of text to justify
    <div class="hack"></div>
  </div>
</header>

Cette variante vous permet d'utiliser cette astuce avec React et des objets de style :

const style = {
  backgroundColor: '#ace',
  textAlign: 'justify'
};

const hack = {
  display: 'inline-block',
  width: '100%'
};

const example = (
  <header style={ style }>
    <div>
      A line of words to stretch
      <div style={ hack } />
    </div>
  </header>
);

ReactDOM.render(example, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

C'est déjà assez laid et compliqué, mais à partir de là, vous devrez choisir la façon dont vous voulez "réparer" la hauteur excessive du conteneur : hauteur fixe ou marges négatives pour le conteneur ? positionnement relatif et chevauchement par rapport aux éléments suivants ? faire correspondre l'arrière-plan du conteneur à l'arrière-plan de la page et faire comme si cette marge supplémentaire était intentionnelle ?

Answer 2

Avec le module de lampe de ligne J'ai écrit que vous pouvez accomplir ce que vous voulez. Vous définissez un nombre maximal de lignes ou une hauteur maximale que vous voulez que le texte prenne et il trouve la taille maximale de la police qui tiendra dans ce nombre de lignes, et/ou ajuste le texte pour le faire tenir.

import LineClamp from "//unpkg.com/@tvanc/lineclamp/dist/esm.min.js";

const clamp = new LineClamp(document.querySelector("#elementToClamp"), {
  useSoftClamp: true,
  // Set an arbitrarily high max font size. Default min is already 1
  maxFontSize: 10000,
  maxLines: 1
});

// .apply() to apply the clamp now
// .watch() to re-apply if content changes or window resizes
clamp.apply().watch();

Exemple de travail : https://codepen.io/tvanc/pen/BaNmVXm

---

Dans la question, l'OP indique l'espacement des lettres. Dans une commentaire L'OP dit l'espacement des lettres ou la taille de la police.

Answer 3

lien jsfiddle

Pour une solution purement HTML/CSS lorsque vous travaillez avec un texte encore plus court (suffisamment court pour que les

text-align: justify;

ne fonctionnerait pas)

J'ai suivi ce grand article comme une source d'inspiration, et a placé chaque lettre dans une div

HTML :

<div class="wrapper">
    <div class="letters">H</div>
    <div class="letters">e</div>
    <div class="letters">l</div>
    <div class="letters">l</div>
    <div class="letters">o</div>
    <div class="letters">&nbsp</div>
    <div class="letters">W</div>
    <div class="letters">o</div>
    <div class="letters">r</div>
    <div class="letters">l</div>
    <div class="letters">d</div>
    <span class="stretch"></span>
</div>

CSS :

.wrapper {
    width: 300px; /*for example*/
    border: 1px solid gray; /*only for demonstrative purposes*/
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.letters {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}