 Autor
|
Tema: ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO] (Leído 53,804 veces)
|
OssoH
 Desconectado
Mensajes: 911
|
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
|
.midiv { word-wrap: break-word; max-width:200px; width:200px; }
<div class="midiv">lalalalalalallalalalallalalalallalallaallalaalalalalalala </div>
Saludos
|
|
|
|
« Última modificación: 13 Abril 2012, 19:59 pm por drvy | BSM »
|
En línea
|
|
|
|
OssoH
Desconectado
Mensajes: 911
|
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
|
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: http://jbdes.net/dev/js/fontsize.html
Saludos |
|
|
|
|
En línea
|
|
|
|
OssoH
Desconectado
Mensajes: 911
|
|
|
|
|
|
En línea
|
|
|
|
OssoH
Desconectado
Mensajes: 911
|
Pongo el ejemplo que he montado por si alguien le interesa <!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
Mensajes: 911
|
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
Mensajes: 911
|
Pongo la solución, obtenida en el enlace : http://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing  <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
Mensajes: 911
|
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
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
|
Como reconocer una linea de texto dentro de un rich text box (solucionado)
Programación Visual Basic
|
Zeroql
|
6
|
9,469
|
15 Abril 2009, 04:17 am
por Zeroql
|
|
|
|
Ajustar imágen al texto con power point?
Diseño Gráfico
|
nichihack
|
2
|
10,645
|
12 Octubre 2011, 23:25 pm
por nichihack
|
|
|
|
ajustar canvas dentro de un div dependiendo de la resolucion de pantalla
Desarrollo Web
|
OssoH
|
2
|
6,010
|
10 Abril 2012, 16:59 pm
por OssoH
|
|
|
|
Ajustar barra a todo el ancho de pantalla
Desarrollo Web
|
Ketchuz
|
4
|
5,055
|
18 Junio 2012, 00:55 am
por #!drvy
|
|
|
|
ajustar texto a pantalla completa. font-size 100%
Desarrollo Web
|
OssoH
|
0
|
2,816
|
6 Noviembre 2020, 16:53 pm
por OssoH
|
 |
