texte CSS justifier avec l'espacement des lettres
https://stackoverflow.com/questions/4355009
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Y at-il un moyen de justifier automatiquement les mots en utilisant l'espacement des lettres, chacun dans sa ligne, à une largeur définie, en utilisant CSS?
Par exemple, « Quelque chose comme ça » regarderait, eh bien, quelque chose comme ceci:
Y at-il un moyen non-importune d'appliquer ce style à mon texte? Je crois que CSS pur n'a pas cette option (au moins pas avec les versions CSS avant 3, CSS3 semble avoir une propriété text-justify, mais il est pas bien encore supporté), donc les solutions js serait bien aussi.
La solution
Voici un script qui peut le faire. Il est pas joli, mais vous pouvez peut-être le pirater pour répondre à vos besoins. (Mise à jour pour le redimensionnement de la poignée)
function SplitText(node) {
var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");
for (var i = 0; i < text.length; i++) {
var letter = document.createElement("span");
letter.style.display = "inline-block";
letter.style.position = "absolute";
letter.appendChild(document.createTextNode(text.charAt(i)));
node.parentNode.insertBefore(letter, node);
var positionRatio = i / (text.length - 1);
var textWidth = letter.clientWidth;
var indent = 100 * positionRatio;
var offset = -textWidth * positionRatio;
letter.style.left = indent + "%";
letter.style.marginLeft = offset + "px";
//console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
}
node.parentNode.removeChild(node);
}
function Justify() {
var TEXT_NODE = 3;
var elem = document.getElementById("character_justify");
elem = elem.firstChild;
while (elem) {
var nextElem = elem.nextSibling;
if (elem.nodeType == TEXT_NODE)
SplitText(elem);
elem = nextElem;
}
}#character_justify {
position: relative;
width: 40%;
border: 1px solid red;
font-size: 32pt;
margin: 0;
padding: 0;
}
#character_justify * {
margin: 0;
padding: 0;
border: none;
}<body onload="Justify()">
<p id="character_justify">
Something<br/> Like
<br/> This
</p>
</body>
Autres conseils
La seule solution est css text-justify: distribute https: //www.w3 .org / TR / css-text-3 / # text-justify mais le soutien est encore très pauvre.
Une petite expérience en utilisant text-align-last: justify et l'ajout d'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>
Je sais que c'est un vieux sujet, mais je fait face à l'autre soir. Et trouvé une solution appropriée en utilisant des tables.
Chaque lettre doit être mis dans un <td> </td> Je sais qu'il semble fastidieux, mais si vous voulez faire cela, ce serait un mot ou deux, non? Ou vous pouvez toujours utiliser JS pour le remplir si est trop. Cependant, ce n'est que CSS et très polyvalent solution.
En utilisant letter-spacing les lettres se distribués correctement. Vous devez jouer avec elle, 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>
Crossbrowser sûr, pratiquement rien ne diffèrent. CSS est juste.
Je l'ai utilisé dans Mon site qui est en anglais et en espagnol. le sous-titre sous mon nom en espagnol a une lettre supplémentaire et intensifiera la largeur. En utilisant les tableaux ci-dessus expliqué, il est distribué à la même largeur automatiquement. Espaçant j'avais eu manuellement définir une condition entier pour chaque langue pour tout le monde que.
Voici un autre aproche en utilisant un fragment de code jQuery j'ai écrit pour cette question: texte extensible à la largeur de la forme div :
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();
});
});
Nécessaires cela aussi, donc je l'ai empaqueté la technique proposée dans un simple à utiliser jquery-plugin vous pouvez trouver ici: https://github.com/marc-portier/jquery-letterjustify#readme .
Il utilise la même procédure à sa base, et ajoute quelques options Tweak. Commentaires sont les bienvenus.
Encore une fois, je sais que c'est vraiment vieux, mais pourquoi ne pas simplement mettre un espace entre chaque lettre et text-align: justify? Ensuite, chaque lettre serait considérée comme un « mot » et justifié en conséquence
Une autre façon de gérer cela pourrait être d'utiliser le « vw » unité de calibrage. Ce type d'appareil peut être utilisé dans les propriétés de taille de la police et représente un pour cent de la largeur de la fenêtre.
Disclaimer: Il est pas exactement ce que vous cherchez, mais ne nécessite pas de script. Il fait ajuster la taille du texte, mais aussi l'échelle à la largeur de votre page.
Par exemple,
.heading {
font-size: 4vw;
}
fera la largeur d'un caractère de la police en cours 4% de la largeur de la fenêtre.
Vous pouvez ensuite utiliser les requêtes des médias si vous souhaitez verrouiller la taille de la police à une taille minimale en fonction de la largeur de la fenêtre.
@media only screen and (max-width: 768px) {
font-size: 2rem;
}
Utilisez l'inspecteur du navigateur pour jouer avec la propriété de taille de la police et tweak la valeur à ce qui est logique pour votre application.
L'unité "vw" fonctionne dans IE9 +, iOS et Android 8.3+ 4.4+ et tous les autres navigateurs grand public. Je ne vous inquiétez pas sur le support mobile trop, que vous pouvez utiliser des requêtes des médias pour mettre le bon dimensionnement de ces dispositifs tels que décrits ci-dessus.
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
unités viewport sont un moyen puissant à l'échelle de nombreux aspects de votre site avec peu de code.
Je viens de faire un script JQuery de l'approche Tony B de la 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 peine. Je ne suis pas sûr que ce soit totalement 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(" ")
.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 pense que je pourrais être mal compris votre question.
