Como posso definir uma largura para truncar visualmente o conteúdo exibido?

https://stackoverflow.com/questions/480722

20-08-2019
|

Pergunta

Estou tentando definir uma largura da coluna de uma tabela, que funciona bem até chegar ao ponto em que os elementos filhos seriam visualmente truncados ... então não será menor menor. ("Visualmente truncado" -Que não se encaixa parece estar escondido atrás da próxima coluna)

Aqui está algum código de exemplo para demonstrar meu problema:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

Eu tentei definir a largura de maneiras diferentes, incluindo

td1.offsetWidth = td1.currentShrinkCount;

td1.width = td1.currentShrinkCount + "px";

td1.style.width = td1.currentShrinkCount + "px";

td1.style.posWidth = td1.currentShrinkCount;

td1.scrollWidth = td1.currentShrinkCount;

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

Sei que provavelmente poderia usar o DIV, mas prefiro não, já que a tabela está sendo gerada a partir de um controle encadernado, e não quero realmente reescrever controles do ASP.NET.

Dito isto, pensei como um último esforço de vala, eu poderia pelo menos envolver o conteúdo de cada 'TD1 com uma div, e o transbordamento cuidaria das coisas, mas mesmo substituindo

<td id="td1">
    Extra_long_filler_text
</td>

com

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

não funcionou.

Alguém sabe como eu posso definir uma largura para truncar visualmente seu conteúdo?

BTW-MY MY MY-TOURS BOWSER IS IE7. Outros navegadores não são importantes agora, pois este é um aplicativo interno.

Solução

Eu apenas tentei adicionar table-layout: fixed; para o <table> E funcionou para mim no IE7.

Em um layout de tabela fixa, o layout horizontal depende apenas da largura da tabela, da largura das colunas, e não do conteúdo das células

Verificação de saída a documentação.

Outras dicas

Solução CSS

"Truncado" pode não ser a palavra que você está procurando. Você pode apenas querer esconder os personagens transbordantes. Se for esse o caso, observe o "transbordamento" do CSS-Property, que ocultará qualquer conteúdo que se estenda além dos limites declarados de seu contêiner.

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

Solução JavaScript

Se você realmente deseja truncar o texto dentro do contêiner, precisará remover um caractere da direita, testar a largura do pai e continuar a remover os caracteres e testar a largura dos pais até que a largura dos pais corresponda à largura declarada.

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

<td id="td1" style="overflow-x:hidden;">

Deveria estar

<td id="td1" style="overflow:hidden;">

O Overflow-X é um atributo Microsoft CSS, que agora faz parte do CSS3. Eu ficaria com o atributo de transbordamento mais antigo.

EDITAR:

Como Paolo menciona, você também precisa adicionar layout de tabela: corrigido; e especifique a largura da tabela. Um exemplo completo segue.

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

Até onde eu sei, uma célula de mesa sempre se estende para acomodar seu conteúdo.

Você já pensou em usar JavaScript para truncar dinamicamente os dados nas células da tabela que têm mais de uma certa quantidade de conteúdo? Como alternativa, você pode fazer isso com mais facilidade o lado do servidor.

Você pode usar jQuery ou JavaScript simples para envolver o conteúdo do (s) seu (s) seu (s) seu (s) seu (s) tags DIV e definir uma largura e transbordamento fixo: ocultos neles. Não é bonito, mas funcionava.

ETA:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

Como a div é o elemento delimitado, é aí que a largura deve ser definida.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow