É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

Cela peut être fait avec text-align:justify et un petit hack. Voir ici :

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

L'astuce consiste à ajouter un élément après le texte qui se fait passer pour un mot vraiment long. Le faux mot est en fait un span élément avec display:inline-block y width:100% .

Dans mon exemple, le faux mot est en rouge et a une hauteur de 1em, mais le hack fonctionnera même sans.

Answer 2

Comme l'a dit Mark, text-align:justify; est la solution la plus simple. Cependant, pour un texte court, elle n'aura aucun effet. Le code jQuery suivant étire le texte à la largeur du conteneur.

Il calcule l'espace pour chaque caractère et définit letter-spacing en conséquence, le texte s'étend à la largeur du conteneur .

Si le texte est trop long pour tenir dans le conteneur, il le laisse s'étendre jusqu'aux lignes suivantes et place la fonction text-align:justify; au texte.

Voici une démo :

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.html(),
        one_line      = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,
        txt_width;

    elmt.html(one_line);
    txt_width = one_line.width();

    if (txt_width < cont_width){
        var  char_width     = txt_width/nb_char,
             ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 

        one_line.css({'letter-spacing': ltr_spacing});
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};

$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).strech_text();
    });
});

p { width:300px; padding: 10px 0;background:gold;}
a{text-decoration:none;}

.stretch_it{ white-space: nowrap; }
.justify{ text-align:justify; }

.one{font-size:10px;}
.two{font-size:20px;}
.three{font-size:30px;}
.four{font-size:40px;}
.arial{font-family:arial;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p  class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>

Démonstration de violon Js

Answer 3

Une méthode HTML/CSS encore plus simple serait d'utiliser la méthode flexbox. Elle est aussi immédiatement réactive. Mais il convient de noter que les moteurs de recherche ne le prendront pas en compte si vous l'utilisez comme un h1 ou autre.

HTML :

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

CSS :

.wrapper{
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border: 1px solid black;
}

jsfiddle ici

Answer 4

Peut-être que ceci pourrait aider :

text-align:justify;

Answer 5

J'ai trouvé une meilleure solution pour les textes plus courts qu'une ligne, sans aucun js ou tag supplémentaire, seulement une classe.

.stretch{ 
  /* We got 2rem to stretch */
  width: 5rem;
  /* We know we only got one line */
  height: 1rem;

  text-align: justify; 
}
.stretch:after{
    /* used to stretch word */
    content: '';
    width: 100%;
    display: inline-block; 
}

<div class="stretch"></div>
<div class="stretch"></div>