¿Desbordamiento de texto CSS en una celda de tabla?

501

Quiero usar CSS text-overflowen una celda de la tabla, de modo que si el texto es demasiado largo para caber en una línea, se recortará con puntos suspensivos en lugar de ajustarse a varias líneas. es posible?

Intenté esto:

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

Pero white-space: nowrapparece que el texto (y su celda) se expande continuamente hacia la derecha, empujando el ancho total de la tabla más allá del ancho de su contenedor. Sin él, sin embargo, el texto continúa ajustando varias líneas cuando llega al borde de la celda.

daGUY
fuente
99
Las celdas de la tabla no se manejan overflowbien. Intenta poner un div en la celda y diseñar ese div.
Sr. Lister

Respuestas:

898

Para recortar texto con puntos suspensivos cuando desborda una celda de la tabla, deberá establecer la max-widthpropiedad CSS en cada tdclase para que funcione el desbordamiento. No se requieren divisiones de diseño adicionales

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Para diseños receptivos; use la max-widthpropiedad CSS para especificar el ancho mínimo efectivo de la columna, o simplemente use max-width: 0;para una flexibilidad ilimitada. Además, la tabla que contiene necesitará un ancho específico, por lo general width: 100%;, y las columnas tendrán su ancho establecido como porcentaje del ancho total

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Histórico: para IE 9 (o menos) necesita tener esto en su HTML, para solucionar un problema de representación específico de IE

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->
TFD
fuente
77
La tabla también necesita un ancho para que esto funcione en IE. jsfiddle.net/rBthS/69
Trevor Dixon
1
Si establece width: 100%;y min-width: 1px;la celda siempre será lo más ancha posible y solo usará puntos suspensivos para truncar el texto cuando sea necesario (no cuando el ancho del elemento alcance un cierto tamaño), esto es muy útil para diseños receptivos.
Duncan Walker
2
@OzrenTkalcecKrznaric funciona de display: table-cellhecho, pero no cuando max-widthse define en porcentaje (%). Probado en FF 32
Greg
14
(Siguiendo con lo anterior) en el caso de que use valores de%, solo usar table-layout: fixedel elemento con display: tablehará el truco
Greg
1
¿Qué tal si desea que el ancho de las columnas se asigne automáticamente de manera receptiva como la tabla receptiva bootstrap? establecer un ancho máximo se inmiscuirá en eso. ¿Hay alguna solución?
anida el
81

Especificar un max-widthancho fijo o no funciona para todas las situaciones, y la tabla debe ser fluida y espaciar automáticamente sus celdas. Para eso están las mesas.

Use esto: http://jsfiddle.net/maruxa1j/

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: '&nbsp;';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Funciona en IE9 y otros navegadores.

AnthumChris
fuente
Nota: esta solución envuelve el contenido de la celda en <span>elementos.
Roy Tinker
2
Esta es una solución realmente inteligente y funciona bien para todas las tablas para las que necesitaría una solución. Sin embargo, requiere que establezca anchos si no desea que todas las celdas de la tabla tengan el mismo ancho.
Kevin Beal
Cuando no hay anchos fijos, esta solución funciona mejor. Muy inteligente de hecho!
avidenic
1
Esto mantiene la alineación vertical cuando otra solución como display: blockno lo hizo
j3ff
¡Simplemente la mejor solución! Bastante ingenioso Muchas gracias.
ClownCoder
39

¿ Por qué sucede esto?

Parece que esta sección en w3.org sugiere que el desbordamiento de texto solo se aplica a elementos de bloque :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

El MDN dice lo mismo .

Este jsfiddle tiene su código (con algunas modificaciones de depuración), que funciona bien si se aplica a un en divlugar de a td. También tiene la única solución alternativa en la que pude pensar rápidamente, envolviendo el contenido del tden un divbloque contenedor . Sin embargo, eso me parece un marcado "feo", así que espero que alguien más tenga una mejor solución. El código para probar esto se ve así:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}
Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Jeroen
fuente
2
Genial gracias. No pude eliminar las celdas de la tabla de mi marcado, por lo que simplemente envolví el contenido en divs (con sus anchos establecidos en los anchos de las celdas) y apliqué el desbordamiento allí. ¡Trabajado como un encanto!
daGUY
28

En caso de que no desee establecer el ancho fijo en nada

La solución a continuación le permite tener un contenido de celda de tabla que es largo, pero no debe afectar el ancho de la tabla principal ni la altura de la fila principal. Por ejemplo, donde desea tener una tabla width:100%que todavía aplique la función de tamaño automático a todas las demás celdas. Útil en cuadrículas de datos con la columna "Notas" o "Comentario" o algo así.

ingrese la descripción de la imagen aquí

Agregue estas 3 reglas a su CSS:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Formatee HTML como este en cualquier celda de la tabla que desee desbordamiento de texto dinámico:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Además, aplique el deseado min-width(o ninguno) a la celda de la tabla.

Por supuesto, el violín: https://jsfiddle.net/9wycg99v/23/

Alph.Dev
fuente
La respuesta más útil, la elipsis dinámica es simplemente increíble.
lucifer63
Desordena los límites de ancho seleccionados de cada columna, por ejemplo, si tiene algunas columnas definidas max-width: X, ahora pueden ser más anchas. Pensé que esto se debe a que se display: flexestá utilizando, pero lo
eliminé
24

Parece que si especificas table-layout: fixed;en el tableelemento, entonces tus estilos tddeberían tener efecto. Sin embargo, esto también afectará el tamaño de las celdas.

Sitepoint analiza un poco los métodos de diseño de tabla aquí: http://reference.sitepoint.com/css/tableformatting

jongala
fuente
2
Esta debería ser la respuesta correcta cuando no desea especificar el ancho de la tabla.
adriaan
20

Si solo desea que la tabla se diseñe automáticamente

Sin usar max-width, o anchos de columna de porcentaje, o table-layout: fixedetc.

https://jsfiddle.net/tturadqq/

Cómo funciona:


Paso 1: solo deja que el diseño automático de la tabla haga lo suyo.

Cuando hay una o más columnas con mucho texto, reducirá las otras columnas tanto como sea posible, luego envolverá el texto de las columnas largas:

ingrese la descripción de la imagen aquí


Paso 2: Envuelva el contenido de la celda en un div, luego configure ese div en max-height: 1.1em

(el 0.1em adicional es para caracteres que se muestran un poco por debajo de la base de texto, como la cola de 'g' y 'y')

ingrese la descripción de la imagen aquí


Paso 3: Establecer titleen los divs

Esto es bueno para la accesibilidad, y es necesario para el pequeño truco que usaremos en un momento.

ingrese la descripción de la imagen aquí


Paso 4: agregue un CSS ::afteren el div

Esta es la parte difícil. Establecemos un CSS ::after, con content: attr(title), luego lo colocamos encima del div y establecemos text-overflow: ellipsis. Lo he coloreado de rojo aquí para que quede claro.

(Observe cómo la columna larga ahora tiene puntos suspensivos)

ingrese la descripción de la imagen aquí


Paso 5: establece el color del texto div en transparent

¡Y hemos terminado!

ingrese la descripción de la imagen aquí

Cameron Price-Austin
fuente
2
¡Esta es una solución increíble y perfecta! ¡Me pregunto por qué esto tiene un voto negativo en lugar de la mayoría de los votos positivos!
zendu
2
¡Hombre asombroso! (@ user9645 - eso no está bien: haz que funcione con una tabla renderizada con Vue.js - asegúrate de poner los títulos en los div, no en los td)
Christian Opitz
@ChristianOpitz - Sí, debo haberlo estropeado de alguna manera ... lo volví a intentar y está funcionando.
user9645
Observé que este enfoque falla cuando se usa en <a>lugar de <div>dentro de la celda de la tabla. Agregar word-break: break-all;resuelve el problema. Ejemplo: jsfiddle.net/de0bjmqv
zendu
Simplemente genial. Y ni siquiera tiene que tener el mismo texto en las celdas (los títulos son suficientes), y luego no necesita max-height: 1.1em, etc., todo lo que necesita para los divs es position: relative ;.
KS74
13

Cuando está en porcentaje de ancho de tabla, o no puede establecer un ancho fijo en la celda de la tabla. Puedes aplicar table-layout: fixed;para que funcione.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}
<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Pegatinas
fuente
5

Envuelva el contenido de la celda en un bloque flexible. Como beneficio adicional, la celda se ajusta automáticamente al ancho visible.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

abbr
fuente
3
También tuve que agregar white-space: nowrap;a la childclase.
Ross Allen
3

Resolví esto usando un div absolutamente posicionado dentro de la celda (relativo).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

Eso es. Luego puede agregar un valor top: al div o centrarlo verticalmente:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Para obtener algo de espacio en el lado derecho, puede reducir un poco el ancho máximo.

Kjetil Hansen
fuente
Sería bueno con un JSFiddle, como muchas de las otras respuestas a esta pregunta popular.
oma
Sí, esto funciona, pero utilicé un poco diferentes estilos para divs: izquierda: 0; superior: 0; derecha: 0; inferior: 0; relleno: 2px; para obtener la posición correcta y tener el mismo relleno que en las celdas de la tabla.
KS74
0

Esto funcionó en mi caso, tanto en Firefox como en Chrome:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
usuario1338062
fuente
-5

Esta es la versión que funciona en IE 9.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>
Ryan O'Connell
fuente
66
a <div> como hijo directo de <table>? Eso no parece correcto!
Michiel
@michiel FYI: los navegadores pueden manejar Divs debajo de las etiquetas de la tabla.
Ryan O'Connell