10

Preciso que seja exibido até no máximo 5 caracteres do conteúdo de cada célula da tabela em uma resolução específica. Não sei se existe algum Pseudo Elemento que faça o que eu preciso, algo como:

Exemplo:

@media (max-width: 548px) {
    p:only-five-letters {
        content: IMPRIME;
    }
}

Saída exemplo:

IMPRI

Conforme o Snippet abaixo, existe alguma maneira de fazer isso no CSS, ou algum script que faça isso?

<!DOCTYPE html>
<html>
<head>
<style>
table tr td {
  border: 1px solid #000;
}
</style>
</head>
<body>

<strong>Como está:</strong>
<table>
  <tr>
    <td> OSe </td>
    <td> Status </td>
    <td> Garantia </td>
  </tr>
  <tr>
    <td> 75553 </td>
    <td> Expedido </td>
    <td> Aprovada </td>
  </tr>
  <tr>
    <td> 75552 </td>
    <td> Cancelado </td>
    <td> Não </td>
  </tr>
  <tr>
    <td> 75551 </td>
    <td> Analise </td>
    <td> Não </td>
  </tr>
</table>
<br>
<strong>Como eu preciso:</strong>
<table>
  <tr>
    <td> OSe </td>
    <td> Statu </td>
    <td> Garan </td>
  </tr>
  <tr>
    <td> 75553 </td>
    <td> Exped </td>
    <td> Aprov </td>
  </tr>
  <tr>
    <td> 75552 </td>
    <td> Cance </td>
    <td> Não </td>
  </tr>
  <tr>
    <td> 75551 </td>
    <td> Anali </td>
    <td> Não </td>
  </tr>
</table>
</body>
</html>

10
  • Você terá que trazer esses dados já tratados para o seu html ou através de um js você vai percorrer todos os elementos da sua table e reduzir a quantidade de caracteres para 5 Commented 18/01/2017 às 11:39
  • Tipo, tenho eles no meu banco de dados, então na hora de montar a tabela eu percorro cada um deles e na hora de imprimir eu imprimo somente os cinco primeiros caracteres ? Commented 18/01/2017 às 11:40
  • isso mesmo, no caso vc vai precisar do conteúdo completo deles depois? Commented 18/01/2017 às 11:42
  • Editei a pergunta, preciso que seja feito isso somente quando estiver em uma resolução específica Commented 18/01/2017 às 11:42
  • Sim, por isso preciso que seja exibido somente 5 caracteres deles, quando estiverem em uma resolução específica, fazendo com que eles se acomodem direitinho na tela. Commented 18/01/2017 às 11:45

2 Respostas 2

13

Pode-se usar o ch

.limit {
  max-width: 5.8ch;
  overflow: hidden;
  white-space: nowrap;
}
<div class="limit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt ad repellendus libero iste deleniti sequi illo suscipit maxime harum vitae, minus a beatae mollitia alias! Quo sint nemo neque.</div>


A unidade ch- character unit ou unidade-caractere em português - é definida como sendo a medida avançada da largura do caractere zero 0.

É mais usada para braile, porém, abre espaços para outras situações, como essa.

Update

Você pode usar números decimais no tamanho. Coloquei 5.8ch e não ficou cortado. É que isso depende do tamanho de 1 caracter. Você tem que saber o tamanho real dele. Não sei se tem uma função em JS ou CSS que faça isso.

4
  • Utilizando do CH, alcanço o que eu queria (em partes), porém, fica visivelmente feio, pois fica aparecendo as letras cortadas, mas obrigado por sua contribuição! Commented 19/01/2017 às 12:28
  • @MarcosHenzel fique tranquilo. Veja o que é melhor para vós mecê. Mas eu fiz uma alteração, caso queira ver. Commented 19/01/2017 às 12:55
  • Sim, eu compreendo, mas se for utilizar fontes de tamanhos diferentes nesses campos onde será "cortado", acredito que não terá a mesma funcionalidade que do modo em que foi passado na resposta acima, utilizando o slice e/ou o substr do JS. Commented 19/01/2017 às 18:32
  • 1
    A resposta acima é mais dinâmica, funciona para qualquer jeito sem escrever muito. Commented 19/01/2017 às 18:56
3

Uma string é um array de caracteres em javascript, então é possível obter um range de caracteres desse array usando slice.

Exemplo:

var tds = document.getElementsByTagName("td");
for (i = 0 ; i < tds.length ; i++){
  tds[i].innerHTML = (tds[i].innerHTML).slice(0,6);
}
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<style>
table tr td {
  border: 1px solid #000;
}
</style>
</head>
<body>

<strong>Como está:</strong>
<table>
  <tr>
    <td> OSe </td>
    <td> Status </td>
    <td> Garantia </td>
  </tr>
  <tr>
    <td> 75553 </td>
    <td> Expedido </td>
    <td> Aprovada </td>
  </tr>
  <tr>
    <td> 75552 </td>
    <td> Cancelado </td>
    <td> Não </td>
  </tr>
  <tr>
    <td> 75551 </td>
    <td> Analise </td>
    <td> Não </td>
  </tr>
</table>
<br>
<strong>Como eu preciso:</strong>
<table>
  <tr>
    <td> OSe </td>
    <td> Statu </td>
    <td> Garan </td>
  </tr>
  <tr>
    <td> 75553 </td>
    <td> Exped </td>
    <td> Aprov </td>
  </tr>
  <tr>
    <td> 75552 </td>
    <td> Cance </td>
    <td> Não </td>
  </tr>
  <tr>
    <td> 75551 </td>
    <td> Anali </td>
    <td> Não </td>
  </tr>
</table>
</body>
</html>

Dessa forma é possível recortar (limitar) a quantidade de caracteres.

Editado:

Solução:

Dessa forma é impresso os 5 primeiros caracteres que era preciso em cada coluna da tabela, quando fosse alterado para uma resolução específica

var td = document.getElementsByTagName("td");
window.onresize = function() {
    var largura = screen.width;
    var altura = screen.height;

    if (largura <= 320 && altura <= 480) {
        for (i = 0; i < td.length; i++){
// armazeno localmente em uma variável os valores originais do td
            localStorage.setItem('td' + i, td[i].innerHTML);
            td[i].innerHTML = (td[i].innerHTML).slice(0,6);
        }
    }
    if (largura <= 480 && altura <= 320) {
        for (a = 0; a < td.length; a++) {
// recupero os valores originais dos td's
            td[a].innerHTML = localStorage.getItem('td' + a);
        }
    } else {
      for (b = 0; b < td.length; b++) {
// esvazio a variável local que foi criada
            Storage.removeItem('td' + b);
        }
    }
};
table tr td {
  border: 1px solid #000;
}
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
<br><strong>Solução</strong>:
<table>
  <tr>
    <td> OSe </td>
    <td> Status </td>
    <td> Garantia </td>
  </tr>
  <tr>
    <td> 75553 </td>
    <td> Expedido </td>
    <td> Aprovada </td>
  </tr>
  <tr>
    <td> 75552 </td>
    <td> Cancelado </td>
    <td> Não </td>
  </tr>
  <tr>
    <td> 75551 </td>
    <td> Analise </td>
    <td> Não </td>
  </tr>
</table>

7
  • Ta aparecendo Error: { "message": "SyntaxError: missing ; after for-loop initializer", "filename": "stacksnippets.net/js", "lineno": 78, "colno": 9 } Commented 18/01/2017 às 11:50
  • no caso ele precisa também dos valores originais, para voltar ao normal dependendo da resolução no momento que o usuário esteja visualizando o conteudo Commented 18/01/2017 às 11:50
  • @MarcosHenzel, talvez tenha sido problema momentâneo do snippet do stack, aqui está funcionando..
    – BrTkCa
    Commented 18/01/2017 às 11:51
  • 1
    Agora eu vi a edição onde você precisa disso somente em uma certa resolução @MarcosHenzel
    – BrTkCa
    Commented 18/01/2017 às 11:56
  • 1
    @LucasCosta, depois de estudar um pouco sobre o método slice, substr, eu percebi que a sua resposta estava exatamente como eu queria, porém faltou apenas os parenteses de abertura ( e de fechamento ) na hora de atribuir o valor à variável dentro do for, ficando assim: (tds[i].innerHTML).slice(0,6); E o erro que estava dando era por causa do uso do let no for, removi o mesmo e o código funcionou perfeitamente. Então utilizei dos métodos do JS para detectar a troca de resolução e apliquei o seu cod! Obrigado @LucasCosta, That's the right response for this question! Commented 19/01/2017 às 12:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .