Foros del web, para los que viven de bits

vic4ever · 11-nov-2005, 03:17

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?

vic4ever · 22-nov-2005, 03:20

alguna sugerencia?

yogiri · 22-nov-2005, 04:15

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-layout: fixed; 
}

#my_table td{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

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!

vic4ever · 22-nov-2005, 07:13

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.

yogiri · 22-nov-2005, 07:28

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!

11-nov-2005, 03:17	#1 (permalink)
vic4ever Fecha de Ingreso: octubre-2005 Mensajes: 53	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?

22-nov-2005, 04:15	#3 (permalink)
yogiri Fecha de Ingreso: noviembre-2005 Mensajes: 21	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-layout: fixed; } #my_table td{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }` 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!

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

22-nov-2005, 03:20	#2 (permalink)
vic4ever Fecha de Ingreso: octubre-2005 Mensajes: 53	alguna sugerencia?

22-nov-2005, 07:13	#4 (permalink)
vic4ever Fecha de Ingreso: octubre-2005 Mensajes: 53	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.

22-nov-2005, 07:28	#5 (permalink)
yogiri Fecha de Ingreso: noviembre-2005 Mensajes: 21	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!