html - rowspan - ¿Por qué las elipsis de CSS no funcionan en la celda de la tabla?

tablas en html5

Question

Considere el siguiente ejemplo: ( demostración en vivo aquí )

HTML:

<table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>

CSS:

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JS:

$(function() {
  console.log("width = " + $("td").width());
});

La salida es: width = 139 , y la elipsis no aparece.

¿Que me estoy perdiendo aqui?

Answer 1

Página de demostración

Para tablas con ancho dinámico, encontré la forma siguiente para producir resultados satisfactorios. Cada <th> que se desee tener la capacidad de texto recortado debe tener un elemento de envoltura interno que envuelva los contenidos del <th> permitir que text-overflow funcione.

Entonces, el verdadero truco es establecer max-width (en el <th> ) en unidades vw .

Esto efectivamente hará que el ancho del elemento esté "vinculado" al ancho de la ventana gráfica (ventana del navegador) y dará como resultado un recorte de contenido receptivo. Establezca las unidades vw en un valor satisfactorio necesario.

CSS mínimo:

th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Aquí hay una demostración ejecutable:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Answer 2

Aparentemente, agregando:

td {
  display: block; /* or inline-block */
}

resuelve el problema también

Otra posible solución es establecer table-layout: fixed; para la tabla, y también establecer su width . Por ejemplo: http://jsfiddle.net/fd3Zx/5/

Answer 3

Como se dijo anteriormente, puede usar td { display: block; } td { display: block; } pero esto frustra el propósito de usar una tabla.

Puede usar la table { table-layout: fixed; } table { table-layout: fixed; } pero tal vez quieras que se comporte de manera diferente para algunas columnas.

Entonces, la mejor manera de lograr lo que quieres es envolver tu texto en un <div> y aplicar tu CSS al <div> (no al <td> ) como este:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Answer 4

En lugar de usar puntos suspensivos para resolver el problema del desbordamiento del texto, encontré que una entrada deshabilitada y con estilo parecía mejor y aún permite al usuario ver y seleccionar toda la cadena si es necesario.

<input disabled=''disabled'' style="border: 0; padding: 0; margin: 0" />

Parece un campo de texto, pero es resaltable para que sea más fácil de usar

Answer 5

Intenta usar max-width en su lugar .

Answer 6

Marque la propiedad CSS de box-sizing de sus elementos td . Tuve un problema con la plantilla css que lo establece en el valor del border-box . Necesitas establecer box-sizing: content-box .

Answer 7

Si no desea establecer el ancho máximo en td (como en esta respuesta ), puede establecer max-width en div:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Nota: el 100% no funciona, pero el 99% funciona en FF. Otros navegadores modernos no necesitan tonterías falsas.

td { border: 1px solid black; padding-left:5px; padding-right:5px; } td>div{ max-width: 99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Answer 8

Solo ofrecía una alternativa ya que tenía este problema y ninguna de las otras respuestas aquí tuvo el efecto deseado que yo quería. Así que en su lugar usé una lista. Ahora, semánticamente, la información que estaba generando podría haber sido considerada como datos tabulares pero también como datos listados.

Así que al final lo que hice fue:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Entonces, básicamente, ul es una table , li es tr y span es td .

Luego, en CSS, establezco los elementos de span que se display:block; y float:left; (Prefiero esa combinación al inline-block en inline-block ya que funcionará en las versiones anteriores de IE, para borrar el efecto de flotación vea: http://css-tricks.com/snippets/css/clear-fix/ ) y para tener también las elipsis:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Entonces todo lo que haces es establecer el max-widths de tus tramos y eso le dará a la lista el aspecto de una tabla.

Answer 9

También es importante poner

table-layout:fixed;

En la tabla que lo contiene, entonces funciona bien en IE9 (si utiliza ancho máximo) también.