il testo CSS giustificare con la spaziatura tra le lettere
https://stackoverflow.com/questions/4355009
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
C'è un modo per giustificare automaticamente le parole con spaziatura tra lettere, ciascuna nella sua fila, ad una larghezza definita, utilizzando i CSS?
Per esempio, "Qualcosa del genere" apparirebbe, beh, qualcosa di simile a questo:
C'è un modo non invadente per applicare tale styling per il mio testo? Credo CSS puro non ha questa possibilità (almeno non con le versioni precedenti CSS 3, CSS3 sembra avere una proprietà text-justify, ma non è ancora ben supportato), in modo da soluzioni js andrebbe bene anche.
Soluzione
Ecco uno script che può farlo. Non è abbastanza, ma forse si può incidere per soddisfare le vostre esigenze. (Aggiornato per gestire il ridimensionamento)
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>
Altri suggerimenti
Il CSS unica soluzione è text-justify: distribute https: //www.w3 .org / TR / css-text-3 / # text-giustifica ma il supporto è ancora molto scarsa.
Un piccolo esperimento utilizzando text-align-last: justify e l'aggiunta di spazi tra le lettere.
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>
So che questo è un argomento vecchio, ma ho affrontato questo l'altra sera. E ha trovato una soluzione adeguata utilizzando le tabelle.
Per ogni lettera sarà messo in un <td> </td> So che sembra noioso, ma se vuoi fare questo, sarebbe una parola o due, giusto? Oppure si può sempre usare JS per riempirlo se è troppo. Tuttavia, questo è solo CSS e molto versatile soluzione.
Uso letter-spacing le lettere ottenere distribuito correttamente. Si dovrebbe giocare con essa, a seconda della larghezza della tabella.
#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>
sicuro crossbrowser, praticamente nulla si differire. È solo CSS.
ho usato in Mio sito che è in inglese e spagnolo. il sottotitolo sotto il mio nome in spagnolo è un'ulteriore lettera e sarà un passo fuori la larghezza. Usando le tabelle illustrate sopra, viene distribuita alla stessa larghezza automaticamente. Spaziatura manualmente avessi avuto per definire una intera condizione per ogni lingua di andare in giro così.
Ecco un altro aproach utilizzando un frammento jQuery che ho scritto per questa domanda: testo tratto di larghezza in forma di 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();
});
});
Necessario anche questo, così ho allegato La tecnica suggerita in un semplice da utilizzare jQuery-plugin potete trovare qui: https://github.com/marc-portier/jquery-letterjustify#readme .
Si utilizza la stessa procedura al suo interno, e aggiunge alcune opzioni per tweak. Commenti benvenuti.
Ancora una volta, so che questo è molto vecchio, ma perché non appena messo uno spazio tra ogni lettera e poi text-align: justify? Poi ogni lettera sarebbe stata considerata come una 'parola' e giustificata di conseguenza
Un modo alternativo per gestire questa potrebbe essere quella di utilizzare il "vw" unità di dimensionamento. Questo tipo di unità può essere utilizzata nelle proprietà delle dimensioni dei caratteri e rappresenta una percentuale della larghezza della finestra.
Avviso: Non è esattamente quello che stai cercando, ma non richiede scripting. Lo fa regolare la dimensione del testo, ma anche scalare alla larghezza della pagina.
Ad esempio,
.heading {
font-size: 4vw;
}
farà la larghezza di un carattere nella corrente di carattere 4% della larghezza della finestra.
È quindi possibile utilizzare le media query, se si desidera bloccare la dimensione del carattere per una dimensione minima in base alla larghezza della finestra.
@media only screen and (max-width: 768px) {
font-size: 2rem;
}
Usa l'ispettore browser per giocare con la proprietà font-size e modificare il valore di ciò che ha senso per la vostra applicazione.
L'unità "vw" lavora in IE9 +, iOS 8.3+ e Android 4.4+ e tutti gli altri principali browser. Io non mi preoccuperei del supporto mobile troppo, come è possibile utilizzare le media query per mettere il dimensionamento giusta per questi dispositivi, come descritto sopra.
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
unità locali finestra sono un potente strumento per scalare diversi aspetti del tuo sito con poco codice.
Ho appena fatto uno script JQuery da approccio di Tony B della tabella. Ecco il JSFiddle https://jsfiddle.net/7tvuzkg3/7/
Questo script crea una tabella con ogni carattere di fila. Questo funziona con piena frase. Io non sono sicuro che questo è completamente ottimizzato.
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>
Cosa c'è di sbagliato con text-align: justify? Penso che potrei essere equivoco tua domanda.
