ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]

OssoH · 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.

#!drvy · 13 Abril 2012, 19:48 PM

Código (css,2) [Seleccionar]

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

Código (html4strict) [Seleccionar]

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

Saludos

OssoH · 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.

#!drvy · 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 (url) [Seleccionar]

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

Saludos

OssoH · 13 Abril 2012, 20:11 PM

Exactamente eso es lo que necesito!!

Voy a estudiar el codigo.
Muchas gracias

OssoH · 13 Abril 2012, 20:29 PM

Pongo el ejemplo que he montado por si alguien le interesa

Código [Seleccionar]


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

OssoH · 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!!

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

Código [Seleccionar]


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

OssoH · 15 Abril 2012, 21:46 PM

Cita de: 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.