Foros del Web » Creando para Internet » CSS »

Cortar palabras segun tamaño de div

Estas en el tema de Cortar palabras segun tamaño de div en el foro de CSS en Foros del Web. Buenas, antes que nada dar las felizitaciones por este foro. i aber mi duda es que aber si alguien me podria dar una idea de ...
  #1 (permalink)  
Antiguo 28/02/2009, 07:33
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Cortar palabras segun tamaño de div

Buenas, antes que nada dar las felizitaciones por este foro.

i aber mi duda es que aber si alguien me podria dar una idea de como hacer teniendo un div que pueda variar su tamaño en la web que corte las palabras cuando llegen al tamaño del div, porque llevo intentando i se puede cortar por caracteres o asi pero lo que no se es que corte, asi que si alguien me podria dar una pista de como puede ir el tema, me basta.

saludos i gracia.
  #2 (permalink)  
Antiguo 28/02/2009, 09:31
Avatar de gakutaru  
Fecha de Ingreso: agosto-2005
Ubicación: frente a mi NtbK
Mensajes: 238
Antigüedad: 12 años, 3 meses
Puntos: 6
Respuesta: Cortar palabras segun tamaño de div

no estoy seguro pero puedes usar la funcion substr de php
h ttp://cl.php.net/substr
  #3 (permalink)  
Antiguo 28/02/2009, 12:24
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

ya pero con eso corto hasta un numero de letras, pero para lo que quiero va a ir introducido dentro de un div, que se va a poder aumentar o disminuir su anchura a gusto del usuario, como cualquier programa del ordenador, y el texto abeces sera 3 las letras i los puntos suspensivos pero si lo estira seran 30 o asi, o todo el texto, y aqui es donde yo ya me pierdo, si seria un div estatico no tengo problema corto a una altura y ya esta pero como ecesito hacerlo no consigo sacarlo.

Muchas gracias por responder, un saludo.
  #4 (permalink)  
Antiguo 28/02/2009, 13:58
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Respuesta: Cortar palabras segun tamaño de div

Para eso necesitas hacer uso de CSS, no de PHP. Ve al foro correcto.
  #5 (permalink)  
Antiguo 28/02/2009, 14:14
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cortar palabras segun tamaño de div

A ver, ese div a veces va a ser más ancho y a veces más angosto, no tiene una medida concreta. Bueno, si quieres solamente que se corte puedes usar darle este estilo: overflow: hidden talvez te sirva.
  #6 (permalink)  
Antiguo 28/02/2009, 14:48
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

efectivamente me funciona pero no puedo poner los 3 puntos suspensivos para indicar que cadenas de texto se an cortado i cuales no, i por eso pense en que podria ser mediante php o incluso javascript.

Un saludo.
  #7 (permalink)  
Antiguo 01/03/2009, 15:48
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

Creo que se me a canviado el post de lugar equivocado, porque no es con css con lo que quiero acerlo, con css no puedo poner los 3 puntos suspensivos si la palabra se sale de larga, no se si se podra hacer en javascript o en php pero con css lo que quiere no.

Un saludo.
  #8 (permalink)  
Antiguo 01/03/2009, 15:53
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cortar palabras segun tamaño de div

Eso es algo difícil de hacer, porque una cadena, digamos de 30 carácteres no siempre hacen la misma longitud y pues se haría imposible calcular la longitud exacta de una cadena para que quepe en una ancho determinado.

Ahora se me ocurre algo, podría funcionar pero no sería exactamente lo que quieres, es decir comúnmente sobraría algo de espacio. Sería de este modo:

Cuando carga la pagina ejecutas una función, digamos setWidth();

<body onload="setWidth()">

Y esta sería la función:

Código:
function setWidth() {
    var dv = document.getElementById("contenedor");  /* Referencio al DIV en cuestion */
    var wi = dv.offsetWidth /* Obtengo su ancho */
    var len = Math.round((wi / 5));       /* Hallamos un número que resulta de la división del ancho del DIV entre un número que debería ser el promedio del ancho de cada carácter */
   var txt = dv.innerHTML.toString();  /* Obtengo el texto del DIV */
   var lTxt = txt.length;    /* Obtengo la longitud del texto */
   txt = txt.substr(0, len)  /* Corto el texto */
   if (lTxt > len) txt += "...";   /* Si la longitud original es mayor que la longitud resultante */   
   dv.innerHTML = txt;     /* Asigno el texto cortado al DIV */
   
}
La idea de esta función es calcular una posible la longitud de la cadena en función del ancho del DIV contenedor, dividiendo a ese ancho entre un número que debería ser el promedio del ancho de un carácter. Esto trae muchos problemas, los carácteres no tienen un ancho fijo, o sea, la "i" tiene mucho menos ancho que la "o" y así cada letra tiene distinto ancho y eso depende de la fuente. Ahora, qué pasaría si el usuario modifica el tamaño de la fuente? Es fácil: Ver -> Tamaño de texto ->

Para ese caso también debes ponerle el estilo overflow: hidden, para evitar que el texto se sobrepase y claro, no tendrías la opción de colocar los puntos suspensivos.

De todos modos espero que te sirva.
  #9 (permalink)  
Antiguo 01/03/2009, 16:08
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

Antes que nada muchisimas gracias por contestar, aora mismo voi a probar aber si funciona, per si aora mas dao la idea jejejej, yo como lo pense era algo asi pero usando php, pero caro el php solo seria pa cortar la cadena, asi que asi es lo mismo solo que solo en js ;) aora pruebo i comento si funciona.

Gracias y un saludo.
  #10 (permalink)  
Antiguo 01/03/2009, 16:56
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

Muchas gracias pero na al final lo dejo pa mas adelante del proyecto, porque cuando amplio el div el texto ya tiene 3 puntos a los que se le suman 3 mas si es corto i asi sucesivamente, asi que lo dejamos mas pa adelante jeje porque esta aciendo perder mucho tiempo i na.

saludos.

pd: aunque creo que elaborando mas ese codigo se podria, teniendo una variable con el texto completo, i asi...
  #11 (permalink)  
Antiguo 01/03/2009, 20:16
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Respuesta: Cortar palabras segun tamaño de div

He aqui tu solucion:
http://www.jide.fr/emulate-text-over...refox-with-css
http://bytes.com/groups/css/496550-overflow-ellipsis

xD Te dije que era CSS.

PD: Solo funciona correctamente en IE.

Última edición por Ronruby; 01/03/2009 a las 20:24
  #12 (permalink)  
Antiguo 02/03/2009, 06:12
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

A pues si, jeje lo siento. Pero efectivamente en firefox no lo e conseguido que funcione asi que no se, si dejarlo que los usuarios de ie lo vean asi i en firefox se vea sinmas, que opinais?

Un Saludo.

pd: en firefox acorta el texto pero no pone los 3 puntos :D
  #13 (permalink)  
Antiguo 02/03/2009, 11:01
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cortar palabras segun tamaño de div

Simplemente se puede agregar algo de codigo para que elimine los tres puntos en caso de existir. Sin embargo ese es otro problema porque si el DIV aumentaría de tamaño no aumentaría el número de carácteres. Lo que se me ocurre entonces es tener un campo oculto en el cual se guardaría el texto completo y desde el cual se jalaría ese texto, de modo que si se amplía el ancho del DIV se puede aumentar el número de carácteres.
  #14 (permalink)  
Antiguo 02/03/2009, 14:28
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Cortar palabras segun tamaño de div

Claro no se, de una forma que quitariamos los puntos suspensivos, que cuando se ejecutase la funcion de canviar el tamaño que tambien lo aria la de limitar el campo, y asi la funcion reciva todo el tiempo el texto completo que debe reducir.

pd:lo siento por el otro, lo escribi en mal estado i no me entere

Última edición por madson; 03/03/2009 a las 16:00
  #15 (permalink)  
Antiguo 03/03/2009, 09:35
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Cortar palabras segun tamaño de div

Eso es español o qué otro idioma?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:18.