CSS texte justifier par l'espacement des lettres

je sais que c'est un vieux sujet, mais j'ai fait face à l'autre soir. Et trouvé une solution appropriée à l'aide de tables.

chaque lettre doit être mise dans un <td> </td> je sais que ça a l'air ennuyeux, mais si vous voulez faire ça, ce serait pour un mot ou deux, non? Ou vous pouvez toujours utiliser JS pour le remplir si c'est trop. Cependant, ce n'est que CSS et solution très polyvalente.

en utilisant l'espacement des lettres les lettres sont distribuées correctement. Vous devez jouer avec, en fonction de la largeur de la table.

#justify {
  width: 300px;
  letter-spacing: 0.5em;
}

<table id="justify">
  <tbody>
    <tr>
      <td>J</td>
      <td>U</td>
      <td>S</td>
      <td>T</td>
      <td>I</td>
      <td>F</td>
      <td>Y</td>
    </tr>
  </tbody>
</table>

voir l'exemple ici

Crossbrowser sûr, pratiquement rien ne doit différer. Est juste en CSS.

Je l'ai utilisé dans mon site web qui est en anglais et en espagnol. le sous-titre sous mon nom en espagnol a une lettre supplémentaire et il sortira la largeur. Utilisation des tableaux expliqués ci-dessus, il est distribué de la même largeur automatiquement. J'ai dû définir une condition pour que chaque langue fasse le tour.

la seule solution css est text-justify: distribute https://www.w3.org/TR/css-text-3/#text-justify mais le soutien est encore très faible.

une petite expérience en utilisant text-align-last: justify et en ajoutant des espaces entre les lettres.

div{
	display:inline-block;
	text-align: justify;
	text-align-last: justify;
	letter-spacing: -0.1em;
}

<div>
S o m e t h i n g<br>
l i k e<br>
t h i s
</div>

Voici une autre approche utilisant un extrait de jQuery que j'ai écrit pour cette question: texte extensible pour s'adapter largeur de div :

DÉMO

HTML:

<div class="stretch">Something</div>
<div class="stretch">Like</div>
<div class="stretch">This</div>

jQuery:

$.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();
    });
});

avait besoin de cela aussi, donc j'ai regroupé la technique suggérée dans un simple pour utiliser jQuery-plugin vous pouvez trouver ici: https://github.com/marc-portier/jquery-letterjustify#readme .

il utilise la même procédure à son cœur, et ajoute quelques options pour modifier. Commentaires bienvenus.

encore une fois, je sais que C'est vraiment vieux, mais pourquoi ne pas simplement mettre un espace entre chaque lettre et puis texte-aligner:justifier? Chaque lettre serait alors considérée comme un "mot" et justifiée en conséquence

Une autre façon de gérer cela pourrait être d'utiliser le "vw" dimensionnement de l'unité. Ce type d'unité peut être utilisé dans les propriétés de taille de police et représente un pourcentage de la largeur de la fenêtre.

Avertissement: Ce n'est pas exactement ce que vous cherchez, mais ne nécessite pas de script. Il ajuste la taille du texte, mais il s'adapte aussi à la largeur de votre page.

par exemple,

.heading {
  font-size: 4vw;
}

fera la largeur d'un caractère dans la police courante de 4% de la largeur de la fenêtre.

vous pouvez alors utiliser media queries si vous souhaitez verrouiller la taille de la police à une taille minimale basée sur la largeur de la fenêtre.

@media only screen and (max-width: 768px) {
    font-size: 2rem;
}

utilisez l'inspecteur de navigateur pour jouer avec la propriété font-size et modifier la valeur de ce qui a du sens pour votre application.

l'unité " vw " fonctionne dans IE9+, iOS 8.3+ et Android 4.4+ et tous les autres navigateurs grand public. Je ne voudrais pas s'inquiéter du support mobile trop, car vous pouvez utiliser les requêtes Médias pour mettre le bon dimensionnement pour ces appareils comme décrit ci-dessus.

http://caniuse.com/#feat=viewport-units

https://css-tricks.com/viewport-sized-typography/

les unités de Viewport sont un moyen puissant pour mettre à l'échelle de nombreux aspects différents de votre site avec peu de code.

je viens de faire un script JQuery de L'approche Tony B de table. Voici le JSFiddle https://jsfiddle.net/7tvuzkg3/7 /

ce script crée une table avec chaque caractère dans une rangée. Cela fonctionne avec la phrase complète. Je ne suis pas sûr que c'est entièrement optimisé.

justifyLetterSpacing("sentence");

function justifyLetterSpacing(divId) {

	// target element
	domWrapper = $('#' + divId).clone().html('');
	// construct <td>
	$('#' + divId).contents().each(function(index){
      // store div id to td child elements class
	  var tdClass = divId ;
      // split text 
	  $textArray = $(this).text().split('');
      // insert each letters in a <td>
	  for (var i = 0; i < $textArray.length; i++) {
        // if it's a 'space', replace him by an 'html space'
        if( $textArray[i] == " " )  {
            $('<td>')
                .addClass(tdClass)
                .html("&nbsp;&nbsp;")
                .appendTo(domWrapper);
        }// if it's a char, add it
        else{  
            $('<td>')
                .addClass(tdClass)
                .text($textArray[i])
                .appendTo(domWrapper);
        }
	  }
	});
    // create table
    table = 
    $( "<table id='"+divId+"'/>" ).append( 
        $( "<tbody>" ).append( 
            $( "<tr>" ).append( 
                ( domWrapper ).children('td') 
            ) 
        )
    );
    // replace original div
	$('#' + divId).replaceWith( table );
}	

#sentence {
  width : 100%;
  background-color : #000;
  color : #fff;
  padding : 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sentence">LOREM IPSUM DOLOR</div>

Qu'est-ce qui ne va pas avec text-align: justify ? Je crois que je me méprends sur votre question.