html - sobrepasa - Estirar texto para ajustar el ancho de div
div que ocupe todo el ancho de la pantalla (10)
Tengo un div con un ancho fijo, pero el texto dentro del div puede cambiar.
¿Hay alguna manera de establecer, con CSS u otro, el espacio entre las letras para que el texto siempre llene el div perfectamente?
Algunas de las respuestas anteriores funcionan bien pero el texto tiene que envolverse con muchos elementos secundarios
y es una gran cantidad de códigos adicionales.
El texto dentro del div debe estar limpio, así que lo hice con la ayuda de JS.
HTML
<div class="words">This is the demo text</div>
CSS
.words{
width:100%;
text-align:center;
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
}
Vanilla JS
let words = document.querySelector(".words"),
wordsArray = words.innerText.split("").map(e => " "==e?"<div> </div>":"<div>"+e+"</div>");
words.innerHTML = wordsArray.join("");
Como dijo Mark, text-align:justify; es la solución más simple. Sin embargo, para texto corto, no tendrá ningún efecto. El siguiente código jQuery extiende el texto al ancho del contenedor.
Calcula el espacio para cada carácter y establece letter-spacing consecuencia para que el texto se extienda al ancho del contenedor .
Si el texto es demasiado largo para caber en el contenedor, permite que se expanda a las siguientes líneas y establece text-align:justify; al texto.
Aquí hay una demostración:
$.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();
});
});
p { width:300px; padding: 10px 0;background:gold;}
a{text-decoration:none;}
.stretch_it{ white-space: nowrap; }
.justify{ text-align:justify; }
.one{font-size:10px;}
.two{font-size:20px;}
.three{font-size:30px;}
.four{font-size:40px;}
.arial{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don''t stretch me</p>
Creo que lo que realmente estás buscando es escalar.
Renderice su fuente con una resolución agradable que tenga sentido y luego use JS para estirarla hasta el contenedor utilizando transformaciones css:
transform: scale(1.05);
Los beneficios de esto es que su texto siempre será ingenioso, pero se encontrará con el problema de que se vuelva demasiado pequeño para ser legible.
Una nota rápida es que tendrá que hacer que el elemento que intenta contraer o expandir tenga una posición absoluta:
position: absolute;
Encontré una solución mejor para el texto más corto que una línea, sin js o etiquetas adicionales, solo una clase.
.stretch{
/* We got 2rem to stretch */
width: 5rem;
/* We know we only got one line */
height: 1rem;
text-align: justify;
}
.stretch:after{
/* used to stretch word */
content: '''';
width: 100%;
display: inline-block;
}
<div class="stretch">你好么</div>
<div class="stretch">你好</div>
Entonces, aún mordisqueando los bordes de este problema, si combina la respuesta de wener que estira breves líneas de texto con esta sugerencia para usar un elemento real de otro hilo, puede hacer todo sin necesitar una :after pseudoclase.
Está sustituyendo en un elemento real y colocándolo después del que desea justificar. Y esto activará la alineación de justificación de la misma manera:
header {
background-color: #ace;
text-align: justify;
}
.hack {
display: inline-block;
width: 100%;
}
<header>
<div>
A line of text to justify
<div class="hack"></div>
</div>
</header>
Esta variación te permite usar este truco con los objetos Reaccionar y estilo:
const style = {
backgroundColor: ''#ace'',
textAlign: ''justify''
};
const hack = {
display: ''inline-block'',
width: ''100%''
};
const example = (
<header style={ style }>
<div>
A line of words to stretch
<div style={ hack } />
</div>
</header>
);
ReactDOM.render(example, document.getElementById(''root''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Esto ya es feo y lo suficientemente hacky, pero a partir de ahí tendrás que elegir tu veneno de la manera que quieras para "arreglar" el exceso de altura del contenedor: altura fija o márgenes negativos para el contenedor. posicionamiento relativo y superposición de los siguientes elementos? unir el fondo del contenedor con el fondo de la página y pretender que ese margen adicional es intencional?
Esto se puede hacer con text-align:justify y un pequeño hack. Vea aquí: http://codepen.io/aakilfernandes/pen/IEAhF/
El truco es agregar un elemento después del texto que pretende ser realmente una palabra larga. La palabra falsa es en realidad un elemento de span con display:inline-block y width:100% .
En mi ejemplo, la palabra falsa está en rojo y tiene una altura de 1em, pero el truco funcionará incluso sin él.
Incluso el método más fácil de HTML / CSS sería usar flexbox. También es receptivo de inmediato. Pero vale la pena señalar que SEO no lo detectará si tuviera que usarlo como h1 o algo así.
HTML:
<div class="wrapper">
<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div> </div>
<div>W</div>
<div>o</div>
<div>r</div>
<div>l</div>
<div>d</div>
CSS:
.wrapper{
width: 100%;
text-align: center;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
border: 1px solid black;
}
Tal vez esto podría ayudar:
text-align:justify;
Para una solución puramente HTML / CSS incluso para texto más corto (lo suficientemente corto como para
text-align: justify;
no funcionaría)
Seguí esta gran publicación como inspiración, y coloqué cada letra dentro de un div
HTML:
<div class="wrapper">
<div class="letters">H</div>
<div class="letters">e</div>
<div class="letters">l</div>
<div class="letters">l</div>
<div class="letters">o</div>
<div class="letters"> </div>
<div class="letters">W</div>
<div class="letters">o</div>
<div class="letters">r</div>
<div class="letters">l</div>
<div class="letters">d</div>
<span class="stretch"></span>
</div>
CSS:
.wrapper {
width: 300px; /*for example*/
border: 1px solid gray; /*only for demonstrative purposes*/
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.letters {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
MARZO 2018 Si está aterrizando en esta pregunta en un momento más actual ...
Estaba intentando hacer lo que el OP me preguntó pero con una sola palabra y encontré el éxito con lo siguiente:
1. Use un <span> y configure css: span { letter-spacing: 0px; display:block} span { letter-spacing: 0px; display:block} (esto hace que el elemento sea tan ancho como el contenido)
2. En la captura de carga, el ancho del span let width = $(''span'').width();
3. Capture la longitud del span let length = $(''span'').length;
4. Restablezca el ancho del tramo al contenedor $(''span'').css({''width'',''100%''});
5. Capture el NUEVO ancho del tramo (o simplemente use el ancho del contenedor), let con = $(''span'').width();
6. Calcule y configure el espacio entre letras para llenar el contenedor $(''span'').css({''letter-spacing'':(cont-width)/length})
Obviamente, esto se puede convertir para usar vanilla js y es útil incluso con la mayoría de los estilos de fuente, incluidas las fuentes no monoespaciales.