¿Desbordamiento de texto CSS en una celda de tabla?

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.

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]-->

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: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Funciona en IE9 y otros navegadores.

¿ 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>

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í.

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/

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

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:

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')

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.

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)

Paso 5: establece el color del texto div en transparent

¡Y hemos terminado!

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>

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>

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.

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%;
}

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>