Foros del Web » Creando para Internet » CSS »

ocultar texto con "overflow:hidden" dentro de una tabla

Estas en el tema de ocultar texto con "overflow:hidden" dentro de una tabla en el foro de CSS en Foros del Web. hola! haber, lo que estoy intentando es que cuando se haga mas pequeña una celda, el texto que esta dentro, si no cabe se oculte. ...
  #1 (permalink)  
Antiguo 11/11/2005, 04:17
 
Fecha de Ingreso: octubre-2005
Mensajes: 53
Antigüedad: 12 años, 2 meses
Puntos: 1
ocultar texto con "overflow:hidden" dentro de una tabla

hola!

haber, lo que estoy intentando es que cuando se haga mas pequeña una celda, el texto que esta dentro, si no cabe se oculte.

he encontrado la propiedad overflow:hidden y si se lo aplico a un DIV funciona correctamente.

ejemplo:
Código PHP:
<div style="width:100%;overflow: hidden;text-overflow:ellipsis">
    
holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div
el resultado es el esperado, el problema es que yo quiero tener ese DIV dento de unas tablas y es ahi cuando ya no hace su efecto el overflow...

por ejemplo en Mozilla si hace el efecto aunque este dento de una tabla.

asi seria el codigo que no funciona:
Código PHP:
<table width="100%">
    <
tr>
      <
td>ALGO</td>
      <
td ><div style="width:100%;overflow: hidden;text-overflow:ellipsis">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
      <
td>ALGO MAS</td>
    </
tr>
</
table
alguna idea?
  #2 (permalink)  
Antiguo 22/11/2005, 04:20
 
Fecha de Ingreso: octubre-2005
Mensajes: 53
Antigüedad: 12 años, 2 meses
Puntos: 1
alguna sugerencia?
  #3 (permalink)  
Antiguo 22/11/2005, 05:15
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
Primero, segun la w3c no debes poner mas los estilos dentro del tag, es decir, la propiedad style no va a existir mas, por lo tanto, hazlo dentro de un archivo CSS.

Ahora bien, respecto a lo que pides haz esto:

Para una tabla:
Código PHP:
<table id="my_table" size="4" border="0" cellspacing="0" cellpadding="0"
    
<tr>
        <
td class="primera_col">Contenido largo</td>
    </
tr>
</
table
El siguiente CSS:

Código PHP:
#my_table{
table-layoutfixed
}

#my_table td{
overflowhidden;
text-overflowellipsis;
white-spacenowrap;

Para dar tamaño a los td (ya que son fijos) debes darselos con '%' sino no funcionara:
Código PHP:
.primera_col{
width:10%;

Espero te sirva!
  #4 (permalink)  
Antiguo 22/11/2005, 08:13
 
Fecha de Ingreso: octubre-2005
Mensajes: 53
Antigüedad: 12 años, 2 meses
Puntos: 1
Bueno, el tema del STYLE, ok, lo tengo claro, simplemente era un ejemplo.

en cuanto al efecto, ok!, funciona de perlas.. me imagino que será por el fixed, porque anda que que no probe formas de ponerlo, con capa, sin capa, en el td, tr, table, etc..

funciona bien, pero cuando he ido a probarlo en Mozilla, , no funciona..
curioso, pero en mozilla solo parece que funciona como dije antes, poniendo el contenido del td dentro de un div, y si, asi funciona ok! lo unico que no muestra los "..."

me imagino que lo dejare con el div, y con hojas de estilo diferentes segun navegador.


saludos.
  #5 (permalink)  
Antiguo 22/11/2005, 08:28
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
El tema de los "..." es por mozilla, te "wrapea" el texto, pero no te muestra los puntitos. A mi no me molesta, suficiente me parece. Una lastima porque queda lindo,pero bue, espero que lo arreglen.

Saludos!
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 22:47.