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>
html
ou através de umjs
você vai percorrer todos os elementos da suatable
e reduzir a quantidade de caracteres para 5