Imprimir Página - ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]

Título: ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]
Publicado por: OssoH en 13 Abril 2012, 19:21 pm

Tengo un div de ancho fijo 200px. Dentro de él tengo un texto que quiero que se ajuste exactamente a este ancho dejando automáticamente el espacio entre letras que considere el navegador.
Esto es posible con CSS?

Gracias.

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: #!drvy en 13 Abril 2012, 19:48 pm

Código

.midiv {
   word-wrap: break-word; 
   max-width:200px; 
   width:200px;
}

Código

<div class="midiv">lalalalalalallalalalallalalalallalallaallalaalalalalalala</div>

Saludos

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: OssoH en 13 Abril 2012, 19:53 pm

Yo no quiero que me corte el texto sino que me lo estire para que ocupe todo el ancho del div.
Logicamente el texto será más pequeño que el ancho del div.

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: #!drvy en 13 Abril 2012, 20:01 pm

Pues con css un poco imposible. Pero con javascript, en especial jQuery en unas lineas sera bastante sencillo.

Ejemplo:
Mira el código fuente de esta pagina:

Código

http://jbdes.net/dev/js/fontsize.html

Saludos

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: OssoH en 13 Abril 2012, 20:11 pm

Exactamente eso es lo que necesito!! :)
Voy a estudiar el codigo.
Muchas gracias ;-) ;-) ;-) ;-)

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: OssoH en 13 Abril 2012, 20:29 pm

Pongo el ejemplo que he montado por si alguien le interesa

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" /></script>
<script type="text/javascript">
	$(document).ready(function() {
		var originalFontSize = 12;
		var sectionWidth = $('#sidebar').width();
		$('#sidebar span').each(function(){
		var spanWidth = $(this).width();
		var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
		$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});				
		}); 
	});
</script>
</head>

<body>

<div id="sidebar" style="background:none repeat scroll 0 0 #333333; color:#FFFFFF; font-size:12px; width:250px;">
<span>ajustado</span>
<br />
<span>prueba</span>
</div>


</body>
</html>

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: OssoH en 13 Abril 2012, 20:38 pm

Aisss, me acabo de dar cuenta que esta casi pero aun no es lo que busco.
Este codigo lo que hace es cambiar el tamaño de letra para que se ajuste al ancho del div. Lo que yo quiero es mantener el mismo tamaño de la letra y ajustar automaticamente el espacio entre letras. :(

Es decir que quedar por ejemplo :

<---- div ancho 300px ----->
p a l a b r o t a s

p a l o s

Gracias!!

Título: Re: ajustar a lo ancho un texto dentro de un div. css
Publicado por: OssoH en 13 Abril 2012, 22:17 pm

Pongo la solución, obtenida en el enlace :
http://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing

;D ;D ;D ;D ;D

Código:

<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>

Título: Re: ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]
Publicado por: OssoH en 15 Abril 2012, 21:46 pm

Cita de: OssoH en 13 Abril 2012, 19:21 pm

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: OssoH en 13 Abril 2012, 19:21 pm