How to print only the first 5 characters?

Question

How to print only the first 5 characters?

Navigation

#1 by (12 votes)
#2 by (3 votes)

10

I need to display up to 5 characters of the contents of each table cell at a specific resolution. I do not know if there is any Pseudo Elemento that does what I need, something like:

Example:

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

Output example:

IMPRI

As per Snippet below, is there any way to do this in CSS, or any script that does this?

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

javascript html jquery css

asked by anonymous 18.01.2017 / 12:35

2 answers

3

A string is an array of characters in javascript, so you can get a range of characters from this array using slice .

Example:

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>

This way you can cut (limit) the number of characters.

Edited:

Solution:

In this way the first 5 characters that were needed in each column of the table are printed when it was changed to a specific resolution

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>

18.01.2017 / 12:48

Receive array and write multiple rows in MySQL What character encoding (Collation) should I use in Mysql?

score 12 · Accepted Answer

You can use 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>

The unit ch - character unit or unit-of-character in English - is defined as the advanced measure of character width zero 0 .

It's mostly used for braille, however, it opens spaces for other situations like that.

Update

You can use decimal numbers in size. I put 5.8ch and it was not cut. It depends on the size of 1 character. You have to know the actual size of it. I do not know if it has a function in JS or CSS that does this.