truncar - El texto CSS justifica con el espaciado de letras
truncar texto css (9)
¿Hay una manera de justificar automáticamente las palabras usando el espaciado entre letras, cada una en su fila, a un ancho definido, usando CSS?
Por ejemplo, "Algo como esto" se vería, bueno, algo como esto:
¿Existe una forma no intrusiva de aplicar ese estilo a mi texto? Creo que CSS puro no tiene esta opción (al menos no con las versiones de CSS anteriores a 3, CSS3 parece tener una propiedad de text-justify , pero aún no está bien soportada), por lo que las soluciones js también estarían bien.
¿Qué hay de malo con text-align: justify ? Creo que podría estar malinterpretando su pregunta.
Acabo de hacer un script de JQuery a partir del enfoque Tony B de la mesa. Aquí está la https://jsfiddle.net/7tvuzkg3/7/ JSFiddle
Este script crea una tabla con cada char en una fila. Esto funciona con oración completa. No estoy seguro de que esto 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>
Aquí hay otro enfoque que utiliza un fragmento de jQuery que escribí para esta pregunta: Estire el texto para que se ajuste al ancho 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();
});
});
Aquí hay un guión que puede hacerlo. No es bonito, pero quizás puedas hackearlo para satisfacer tus necesidades. (Actualizado para manejar el cambio de tamaño)
<html>
<head>
<style>
#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;
}
</style>
<script>
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;
}
}
</script>
</head>
<body onload="Justify()">
<p id="character_justify">
Something<br/>
Like<br/>
This
</p>
</body>
La única solución de css es text-justify: distribute https://www.w3.org/TR/css-text-3/#text-justify pero el soporte aún es muy deficiente.
Un pequeño experimento utilizando text-align-last: justify y agrega 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>
Necesité esto también, así que he incluido la técnica sugerida en un jquery-plugin fácil de usar que puede encontrar aquí: https://github.com/marc-portier/jquery-letterjustify#readme .
Utiliza el mismo procedimiento en su núcleo y agrega algunas opciones para modificar. Comentarios bienvenidos.
Sé que este es un tema antiguo, pero enfrenté esto la otra noche. Y encontré una solución adecuada utilizando tablas.
Cada letra se colocará en un <td> </td> Sé que parece tedioso, pero si quieres hacer esto, sería por una palabra o dos, ¿verdad? O siempre puedes usar JS para llenarlo si es demasiado. Sin embargo, esto es solo CSS y una solución muy versátil.
Usando el espacio entre letras, las letras se distribuyen adecuadamente. Debes jugar con él, dependiendo del ancho de la mesa.
#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>
Cazador cruzado seguro, prácticamente nada diferirá. Es solo CSS.
Lo usé en mi sitio web que está en inglés y español. El subtítulo bajo mi nombre en español tiene una letra adicional y se reducirá el ancho. Usando las tablas explicadas anteriormente, se distribuye al mismo ancho automáticamente. Al espaciarlo manualmente, tuve que definir una condición completa para cada idioma.
Una forma alternativa de manejar esto podría ser usar la unidad de tamaño "vw". Este tipo de unidad se puede usar en las propiedades de tamaño de fuente y representa un porcentaje del ancho de la ventana.
Descargo de responsabilidad: no es exactamente lo que está buscando, pero no requiere secuencias de comandos. Ajusta el tamaño del texto, pero también se escalará al ancho de la página.
Por ejemplo,
.heading {
font-size: 4vw;
}
hará que el ancho de un carácter en la fuente actual sea 4% del ancho de la ventana.
Luego puede usar consultas de medios si desea bloquear el tamaño de fuente a un tamaño mínimo en función del ancho de la ventana.
@media only screen and (max-width: 768px) {
font-size: 2rem;
}
Utilice el inspector del navegador para jugar con la propiedad de tamaño de fuente y ajuste el valor a lo que tenga sentido para su aplicación.
La unidad "vw" funciona en IE9 +, iOS 8.3+ y Android 4.4+ y en todos los demás navegadores principales. No me preocuparía demasiado el soporte móvil, ya que puede utilizar consultas de medios para establecer el tamaño correcto para estos dispositivos como se describe anteriormente.
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
Las unidades Viewport son una forma poderosa de escalar muchos aspectos diferentes de su sitio con poco código.
Una vez más, sé que esto es REALMENTE viejo, pero ¿por qué no solo se pone un espacio entre cada letra y luego se alinea el texto: justificar? Entonces cada letra se consideraría como una ''palabra'' y se justificaría en consecuencia