Pergunta sobre ellipsis, css3, css, html – Por que as reticências CSS não funcionam na célula da tabela?

130

Considere o seguinte exemplo:demonstração ao vivo aqui)

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>

A saída é:width = 139e as reticências não aparecem.

O que estou perdendo aqui?

De alguma forma, duplicar, mas a resposta não fornece uma solução alternativa (como Arlen Cuss faz). Florian Margaine
Paratext-overflow:ellipsis para trabalhar, aqui estão os requisitos:stackoverflow.com/a/33061059/3597276 Michael_B
possível duplicata deEstouro de texto CSS em uma célula de tabela? BoltClock
Eu ainda prefiro as respostas listadas nesta página no entanto. Florian Margaine

Sua resposta

10   a resposta
3

Apenas oferecendo uma alternativa como eu tive esse problema e nenhuma das outras respostas aqui teve o efeito desejado que eu queria. Então, ao invés disso, usei uma lista. Agora, semanticamente, as informações que eu estava transmitindo poderiam ter sido consideradas como dados tabulares, mas também como dados listados.

Então, no final, o que fiz foi:

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

Então, basicamenteul étable, li étrespan étd.

Então em CSS eu configurei ospan elementos a seremdisplay:block; efloat:left; (Eu prefiro essa combinação parainline-block como funcionará em versões mais antigas do IE, para limpar o efeito de flutuação, veja:http://css-tricks.com/snippets/css/clear-fix/) e também ter as elipses:

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

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

Então tudo que você faz é definir omax-widths das suas extensões e isso dará à lista uma aparência de uma tabela.

95

Aparentemente, adicionando:

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

resolve o problema também.

Outra solução possível é definirtable-layout: fixed; para a mesa, e também definir éwidth. Por exemplo:http://jsfiddle.net/fd3Zx/5/

Às vezes eu quero adicionar* {display: block} para minhas folhas de estilo ... Jrop
display: block; tipo de derrota o propósito de usar uma tabela. eu gosto detable-layout: fixed; opção, funcionou bem para mim. Alex K
Exatamente. Elementos comdisplay: table-cell (o padrão paratd elementos) não aceitam uma largura. Michael Mior
table-layout:fixed distribui a largura das colunas de uma maneira menos inteligente. Existe outra opção que irá atribuir a largura da coluna da mesma maneiratable-layout: normal e ainda exibir as elipses corretamente? nest
68

Como dito antes, você pode usartd { display: block; } mas isso anula o propósito de usar uma tabela.

Você pode usartable { table-layout: fixed; } mas talvez você queira que ele se comporte de maneira diferente para algumas colunas.

Então, a melhor maneira de conseguir o que você quer seria envolver seu texto em um<div> e aplique seu CSS ao<div> (não ao<td>) como isso :

<code>td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</code>
Essa é realmente a melhor solução que já vi em reticências em tabelas. membersound
Este é o método mais simples que já vi e funciona no IE8. Keith Ketterer
1

Em vez de usar reticências para resolver o problema do transbordamento de texto, descobri que uma entrada com estilo e desativada parecia melhor e ainda permite que o usuário visualize e selecione a sequência inteira, se necessário.

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

Parece um campo de texto, mas é mais fácil de destacar

Não é fácil para o usuário porque, usando tecnologias assistivas, isso é interpretado erroneamente como uma entrada e, portanto, o usuário acha que pode inserir alguma coisa. Não é correto usar a semântica dos elementos. Carlo
73

Também é importante colocar

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

Na tabela que contém, por isso, ele funciona bem no IE9 (se você usar o max-width) também.

Isso é exatamente o que eu precisava. Eu tenho a largura da tabela 100%. E todas as colunas, exceto uma com largura fixa. Isso permite que a última coluna ocupe tanto espaço quanto sobra. matthew_360
isso também garante que o estouro de texto funcione em layouts responsivos jao
1

Verificabox-sizing propriedade css do seutd elementos. Eu tive problema com o modelo de css que define aborder-box valor. Você precisa definirbox-sizing: content-box.

34

Tente usarmax-width ao invés dewidth, a tabela ainda irá calcular a largura automaticamente.

Funciona mesmo emie11 (com o modo de compatibilidade 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.

Bem manchado. Provavelmente é melhor usarambos, de modo que o elemento tenha uma largura fixa. Caso contrário, poderia ser mais curto se o conteúdo permitisse. LSerni
0

Se você não quiser definir max-width para td (como emesta resposta), você pode definir max-width para div:

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

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

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

Nota: 100% não funciona, mas 99% faz o truque em FF. Outros navegadores modernos não precisam de truques engraçados.

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

}
15
Página de demonstração

Para tabelas com largura dinâmica, encontrei o caminho abaixo para produzir resultados satisfatórios. Cada<th> que deseja ter a capacidade de texto recortado deve ter um elemento de embalagem interna que envolve o conteúdo do<th> permitirtext-overflow trabalhar.

Então, o verdadeiro truque é definirmax-width (no<th>) emvw unidades.

Isso fará com que a largura do elemento seja "vinculada" à largura da janela de exibição (janela do navegador) e resultará em um recorte de conteúdo responsivo. Colocou ovw unidades para um valor satisfatório necessário.

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

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}
</code>
Aqui está uma demonstração executável:

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

0

Deixe suas mesas como elas são. Apenas envolva o conteúdo dentro do TD com um intervalo que tenha o CSS de truncamento 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>

Perguntas relacionadas