Pregunta sobre html, ellipsis, css, css3 – ¿Por qué no funciona la elipsis CSS en la celda de la tabla?

130

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

HTML:

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

CSS:

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

JS:

<code>$(function() {
  console.log("width = " + $("td").width());
});
</code>

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

¿Que me estoy perdiendo aqui?

width yheight En la mesa las celdas siempre se usan comomínimo anchura y altura. Las celdas de la mesa son diferentes! Mr Lister
Todavía prefiero las respuestas que figuran en esta página sin embargo. Florian Margaine
portext-overflow:ellipsis Para trabajar, aquí están los requisitos:stackoverflow.com/a/33061059/3597276 Michael_B

Tu respuesta

10   la respuesta
3

Solo ofrecí una alternativa porque tuve este problema y ninguna de las otras respuestas aquí tuvo el efecto deseado que quería. Así que en vez usé una lista. Ahora, de forma semántica, 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:

<code><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>
</code>

Así que básicamenteul estable, li estryspan estd.

Luego en CSS pongo elspan elementos para serdisplay:block; yfloat:left; (Prefiero esa combinación ainline-block como funcionará en versiones anteriores de IE, para eliminar el efecto de flotación, consulte:http://css-tricks.com/snippets/css/clear-fix/) y para tener también las elipsis:

<code>span {
    display: block;
    float: left;
    width: 100%;

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

Entonces todo lo que haces es configurar elmax-widths de sus vanos y eso le dará a la lista el aspecto de una tabla.

73

También es importante poner

<code>table-layout:fixed;
</code>

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

Esto también asegurará que el desbordamiento de texto funcione en diseños sensibles. jao
Esto es exactamente lo que necesitaba. Tengo el ancho de la mesa 100%. Y todas las columnas excepto una con un ancho fijo. Esto permite que la última columna ocupe tanto espacio como queda. matthew_360
1

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

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

Parece un campo de texto, pero se puede resaltar, por lo que es más fácil de usar.

No es fácil de usar porque el uso de tecnologías de asistencia se puede leer mal como entrada y el usuario cree que puede ingresar algo. No está bien mal usar la semántica de los elementos. Carlo
15
Página demo

Para las tablas con ancho dinámico, encontré la siguiente forma de producir resultados satisfactorios. Cada<th> que se desea tener capacidad de texto recortado debe tener un elemento de envoltura interior que envuelve el contenido de la<th> permitirtext-overflow trabajar.

Entonces, el verdadero truco es establecermax-width (sobre el<th>) envw unidades.

Esto 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 sensible. Selecciona elvw Se necesitan unidades a un valor satisfactorio.

CSS mínimo:
<code>th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}
</code>
Aquí hay una demostración ejecutable:

<code>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;
}</code>
<code><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></code>

95

Al parecer, añadiendo:

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

resuelve el problema también.

Otra posible solución es establecertable-layout: fixed; Para la mesa, y también para establecerla.width. Por ejemplo:http://jsfiddle.net/fd3Zx/5/

display: block; tipo de derrotas el propósito de usar una tabla. me gusta eltable-layout: fixed; Opción, funcionó bien para mí. Alex K
table-layout:fixed Distribuye el ancho de las columnas de una manera menos inteligente. ¿Hay otra opción que asignará el ancho de columna de la misma manera?table-layout: normal y sin embargo, mostrar los puntos suspensivos correctamente? nest
Exactamente. Elementos condisplay: table-cell (el valor predeterminado paratd elementos) no aceptan un ancho. Michael Mior
A veces quiero añadir* {display: block} a mis hojas de estilo ... Jrop
68

Como se dijo antes, puedes usartd { display: block; } pero esto anula el propósito de usar una tabla.

Puedes usartable { table-layout: fixed; } Pero quizás quieras que se comporte de manera diferente en algunas columnas.

Entonces, la mejor manera de lograr lo que quiere es envolver su texto en un<div> y aplica tu CSS a la<div> (no a la<td>) Me gusta esto :

<code>td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</code>
Este es el método más simple que he visto y realmente funciona en IE8. Keith Ketterer
Esa es realmente la mejor solución que he visto en puntos suspensivos en tablas. membersound
1

Comprobarbox-sizing css propiedad de tutd elementos. Tuve un problema con la plantilla css que lo establece enborder-box valor. Necesitas establecerbox-sizing: content-box.

0

Deja tus mesas como están. Simplemente envuelva el contenido dentro de los TD con un intervalo que tenga el CSS de truncamiento aplicado.

<code>/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>
</code>
34

Intenta usarmax-width en lugar dewidth, la tabla todavía calculará el ancho automáticamente.

Funciona incluso enie11 (con modo de compatibilidad ie8).

<code>td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>
<code><table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table></code>

jsfiddle.

Bien descrito. Probablemente es mejor usarambos, para que el elemento tenga un ancho fijo. De lo contrario, podría ser más corto si el contenido lo permite. LSerni
0

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

<code>function so_hack(){}
</code>

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

<code>function so_hack(){}
</code>

Nota: el 100% no funciona, pero el 99% hace el truco en FF. Otros navegadores modernos no necesitan trucos div divinos.

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

}

Preguntas relacionadas