¿Cómo limitar una celda de tabla a una línea de texto usando CSS?

Tengo una tabla de usuarios donde cada fila contiene sus nombres, dirección de correo electrónico, y tal. Para algunos usuarios esta fila es una línea de texto alta, para otros dos, etc. Pero me gustaría que cada fila de la tabla sea una línea de texto alta, truncando el resto.¿Cómo limitar una celda de tabla a una línea de texto usando CSS?

vi estas dos preguntas:

De hecho mi pregunta es exactamente similar a la primera, pero ya que el enlace está muerto no puedo estudiar eso. Ambas respuestas dicen usar white-space: nowrap. Sin embargo, esto no funciona, tal vez me falta algo.

Ya que no puedo mostrar el código, que reproduce el problema:

<style type="text/css"> 
td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 125px; 
    height: 25px; 
} 
</style> 

<div style="width:500px"> 
<table> 
    <tr> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
    </tr> 
</table> 
</div>

Sin white-space la mesa es 500px de ancho, y el texto tiene más de una línea.

Pero white-space: nowrap hace que el navegador simplemente ignore la directiva width y aumente el ancho de la tabla hasta que todos los datos quepan en una línea.

¿Qué estoy haciendo mal?

Fuente

2010-07-31 Tomaka17

No en este ejemplo, pero sí en mi sitio web real. De todos modos, no creo que no tener un doctype esté relacionado con este problema. – Tomaka17

desbordamiento solo funcionará si sabe por dónde empezar teniendo en cuenta que se ha desbordado. Es necesario configurar el ancho y la altura atributo del <td>

tomar 2

Trate de añadir table-layout: fixed; width:500px; al estilo de la tabla.

ACTUALIZACIÓN 3

confirmó esto funcionó: http://jsfiddle.net/e3Eqn/

Fuente

2010-07-31 18:01:46

Ya lo había probado antes de hacer la pregunta y tampoco funciona.Edité la pregunta para agregarlo – Tomaka17

@ Tomaka17, edité mi respuesta para incluir instrucciones adicionales. –

¿Hay alguna manera de decir "el desbordamiento es el tamaño del elemento si este elemento no estuviera en él"? – Claudiu

Añadir lo siguiente a la hoja de estilos:

table{ 
    width: 500px; table-layout:fixed; 
}

Es necesario añadir el ancho de la tabla para asegurarse de que la próxima propiedad encajará los elementos al tamaño especificado. La propiedad de diseño de tabla obliga al navegador a utilizar un diseño fijo dentro de los 500 píxeles que se le proporcionan.

Fuente

2010-07-31 18:42:27 cm2

Gracias, te doy +1 Sin embargo, marqué la respuesta de Mike Sherov como aceptada ya que aprendí la existencia de desbordamiento de texto gracias a él – Tomaka17

+1. Eso estuvo muy cerca. –

Añadir lo siguiente a la hoja de estilos:

table { white-space: nowrap; }

Fuente

2013-08-06 09:19:20 Googuez

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

simple y útil. use el código de arriba para

Fuente

2015-05-14 08:34:39 user2782717

¿Cómo limitar una celda de tabla a una línea de texto usando CSS?

Respuesta

Cuestiones relacionadas