texto CSS justificar con el espaciado entre caracteres
https://stackoverflow.com/questions/4355009
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Hay una manera de justificar automáticamente las palabras usando espacio entre las letras, cada uno en su fila, a un ancho definido, usando CSS?
Por ejemplo, "Algo como esto" sería, así, algo como esto:
¿Hay una manera no intrusiva para aplicar tales estilo a mi texto? Creo puro CSS no tiene esta opción (por lo menos no con versiones anteriores al 3 CSS, CSS3 parece tener una propiedad text-justify, pero no es así todavía es compatible), por lo que las soluciones js estaría bien también.
Solución
Aquí hay un script que puede hacerlo. No es bonito, pero tal vez usted puede entrar ilegalmente en él para satisfacer sus necesidades. (Actualizado a cambiar el tamaño de la manija)
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>
Otros consejos
El css única solución es text-justify: distribute https: //www.w3 .org / TR / CSS text-3 / # texto justifica pero el apoyo es aún muy pobre.
Un pequeño experimento usando text-align-last: justify y añadiendo espacios entre letras.
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>
Yo sé que esto es un viejo tema, pero se enfrentó a esto la otra noche. Y ha encontrado una solución adecuada utilizando tablas.
Cada carta se pone en un <td> </td> Sé que parece tedioso, pero si quieres hacer esto, sería de una o dos palabras, ¿verdad? O siempre se puede utilizar JS para llenarlo si es demasiado. Sin embargo, esto es sólo CSS y muy versátil solución.
Uso de letter-spacing las cartas se distribuyen adecuadamente. Usted debe jugar un rato con él, en función de la anchura de la tabla.
#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 segura, prácticamente nada se diferencian. Es sólo CSS.
Mi sitio web que está en Inglés y español. el subtítulo debajo de mi nombre en español tiene una letra adicional y va a salir de la anchura. Usando las tablas se explicó anteriormente, se distribuye a la misma anchura de forma automática. Espaciamiento de forma manual que había tenido que definir una condición entera para cada idioma para ir alrededor de eso.
Aquí es otro abordaje utilizando un fragmento de código jQuery que escribí para esta pregunta: texto estiramiento a la anchura de ajuste de 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();
});
});
Se necesita esto también, así que he liado la técnica sugerida en un sencillo de usar jquery-plugin se puede encontrar aquí: https://github.com/marc-portier/jquery-letterjustify#readme .
Se utiliza el mismo procedimiento que en su núcleo, y añade algunas opciones para modificar. Comentarios bienvenidos.
Una vez más, sé que esto es muy viejo, pero por qué no sólo hay que poner un espacio entre cada letra y luego text-align: justify? A continuación, cada letra se consideraría como una 'palabra' y justificó en consecuencia
Una forma alternativa de manejar esto podría ser el uso de la "VW" unidad de encolado. Este tipo de unidad se puede utilizar en propiedades de tamaño de fuente y representa un porcentaje del ancho de la ventana.
Renuncia: No es exactamente lo que está buscando, pero no requiere secuencias de comandos. Lo hace ajustar el tamaño del texto, sino que también se escala al ancho de la página.
Por ejemplo,
.heading {
font-size: 4vw;
}
hará que el ancho de un carácter en la corriente de la fuente 4% de la anchura de la ventana.
A continuación, puede utilizar consultas de medios de comunicación si desea bloquear el tamaño de la fuente a un tamaño mínimo basado en el ancho de la ventana.
@media only screen and (max-width: 768px) {
font-size: 2rem;
}
Usar el inspector navegador para jugar con la propiedad font-size y ajustar el valor de lo que tiene sentido para su aplicación.
La unidad "vw" trabaja en IE9 +, iOS y Android 8.3+ 4.4+ y todos los demás navegadores convencionales. Yo no me preocuparía por el soporte móvil demasiado, ya que puede utilizar preguntas de los medios para poner el dimensionamiento adecuado para estos dispositivos como se describe anteriormente.
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
unidades de ventanilla son una poderosa manera de escalar muchos aspectos diferentes de su sitio con poco código.
acabo de hacer un script jQuery desde el enfoque de la mesa de Tony B. Aquí está el jsFiddle https://jsfiddle.net/7tvuzkg3/7/
Este script crea una tabla con cada caracter en una fila. Esto funciona con frase completa. Estoy seguro de que esto no está totalmente optimizado.
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é hay de malo en text-align: justify? Creo que podría ser mal entendido su pregunta.
