elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]  (Leído 49,401 veces)
OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]
« 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.


« Última modificación: 15 Abril 2012, 21:47 pm por OssoH » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.757



Ver Perfil WWW
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #1 en: 13 Abril 2012, 19:48 pm »

Código
  1. .midiv {
  2.   word-wrap: break-word;
  3.   max-width:200px;
  4.   width:200px;
  5. }

Código
  1. <div class="midiv">lalalalalalallalalalallalalalallalallaallalaalalalalalala</div>


Saludos


« Última modificación: 13 Abril 2012, 19:59 pm por drvy | BSM » En línea

OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #2 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.
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.757



Ver Perfil WWW
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #3 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
  1. http://jbdes.net/dev/js/fontsize.html

Saludos
En línea

OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #4 en: 13 Abril 2012, 20:11 pm »

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

OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #5 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>

En línea

OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #6 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!!
En línea

OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
Re: ajustar a lo ancho un texto dentro de un div. css
« Respuesta #7 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>

En línea

OssoH


Desconectado Desconectado

Mensajes: 871


Ver Perfil
Re: ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]
« Respuesta #8 en: 15 Abril 2012, 21:46 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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines