How to print only the first 5 characters?

Asked

Viewed 256 times

10

I need it to be displayed up to a maximum of 5 characters of the contents of each table cell in a specific resolution. I don’t know if there are any Pseudo Elemento do what I need, something like:

Example:

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

Output example:

IMPRI

According to the Snippet below, there is some way to do this in CSS, or some 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 jquery html css

  • You will have to bring this data already processed to your html or through a js you will go through all the elements of your table and reduce the number of characters to 5

  • Like, I have them in my database, so when I assemble the table I go through each of them and when I print I print only the first five characters ?

  • that’s right, in case you’ll need their full content after?

  • I edited the question, I need it to be done only when it is in a specific resolution

  • Yes, so I need to display only 5 characters of them, when they are in a specific resolution, making them fit right on the screen.

  • now yes, the ideal is that you do it through a js, and in addition you save your original values in an attribute data, in order to be able to return the original value if the resolution returns to normal, at the moment I have no way to help you in the code, but if no one responds until later I help you

  • Instead of limiting the characters you have tried to limit the size of the cell using max-width. It wouldn’t be 100% but it would be more practical than going through all the values to limit them one by one

  • I’ll try to do with JS, but you say, limit the width of each column?

  • In this case it would limit the size of each cell to a point where it would fit on average 5 characters

  • I get it, I’ll try to apply ! Thanks !!

Show 5 more comments

2 answers

13


One can use the 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 unity ch- Character Unit or unit-character in Portuguese - é definido como sendo a advanced measure of the width of the zero character 0.

It’s mostly used for braille, but it makes room for other situations, like this.

Update

You can use decimal numbers in size. I put 5.8ch and it didn’t get cut. It just depends on the size of 1 character. You have to know the actual size of it. I don’t know if you have a JS or CSS function that does this.

  • Using the CH, I reach what I wanted (in parts), however, it is visibly ugly, because it keeps appearing the cut letters, but thank you for your contribution!

  • @Marcoshenzel, rest assured. See what’s best for you guys. But I made a change if you want to see.

  • Yes, I understand, but if you are going to use fonts of different sizes in those fields where you will be "cut", I believe that you will not have the same functionality as the one you passed in the answer above, using the slice and/or the substr of JS.

  • 1

    The above answer is more dynamic, works for any way without writing too much.

3

A string is a javascript character array, so you can get a character range from that 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 it is possible to crop (limit) the number of characters.

Edited:

Solution:

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>

  • Ta appearing Error: { "message": "Syntaxerror: Missing ; after for-loop initializer", "filename": "http://stacksnippets.net/js", "lineno": 78, "colno": 9 }

  • in case it also needs the original values, to return to normal depending on the resolution at the time the user is viewing the content

  • @Marcoshenzel, maybe it was a momentary stack snippet problem, here it is working..

  • @Jefersonalmeida, the point of the answer is the use of Slice, is an example. The elements that will be selected depends on the selector’s discretion.

  • Okay @Lucascosta thanks, I’ll see here if I can apply to my code!

  • 1

    Now I’ve seen the issue where you need it only in a certain resolution @Marcoshenzel

  • 1

    @Lucascosta, after studying a little about the method slice, substr, I realized that your answer was exactly as I wanted, but it lacked only the opening parentheses ( and closing ) when assigning the value to the variable within the for, being like this: (tds[i].innerHTML).slice(0,6); And the error I was making was because of the use of let in the for, I removed it and the code worked perfectly. JS to detect the resolution exchange and applied your Cod! Thanks @Lucascosta, That's the right response for this question!

Show 2 more comments

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.