Abbreviate content inside cell (HTML table)

Question

I have a table that is composed of values that are pulled from the database....

This table has the predefined size, and it turns out that when the value pulled from the bank is greater than the cell, it resizes and messes up everything...

Example:

I want to know if you can do this:

Code

<div class="tabela-clientes" >
   <table id="mytable">              
      <tr>
         <td style="width: 200px">
            Nome
         </td>
          <td style="width: 200px">
            Empresa
          </td>
          <td style="width: 90px">
            Telefone
          </td>
          <td style="width: 180px;">
             Email
          </td>
          <td style="width: 130px; max-width:130px;">
             Opções
          </td>
        </tr>
        ......

Someone once needed something like this?

---

Solution formulated with the help of Diego Souza

$nome = "{$linha['nome']}";

//conta numero de caracteres da string
$tam = strlen($nome);

//se string tiver mais que 25 caracteres
if($tam > 25){
    //Exibe apenas 25 caracteres
    $rest = substr($nome, 0, 25); 
    echo $rest . "...";
}else{
    echo $nome;
}

Answer 1

You have to set fixed sizes for the columns. It’s the only way. In percentage or pixel.

But if you want to abbreviate the content, use a function that limits your string.

In PHP is the substr(string, inicial, quantidade).

<?php
$rest = substr("abcdef", 0, -1);  // retorna "abcde"
$rest = substr("abcdef", 2, -1);  // retorna "cde"
$rest = substr("abcdef", 4, -4);  // retorna ""
$rest = substr("abcdef", -3, -1); // retorna "de"
?>

http://php.net/manual/en/function.substr.php

Answer 2

The simplest solution is to use only CSS, in this case a combination of display, white-space, overflow and text-overflow

The Javascript function is only used to copy the text of the cell to the title property of the cell, so the user can read the text in full when passing the mouse over the cell.

var truncate = document.querySelectorAll(".truncate");
truncate = [].slice.apply(truncate);
truncate.forEach(function (elemento, indice) {
  elemento.title = elemento.innerHTML;
})

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

<table id="mytable">      
  <thead>
    <tr>
      <th style="width: 200px">
        Nome
      </th>
      <th style="width: 400px">
        Descrição
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 200px">
        Toby Mosque
      </td>
      <td style="width: 400px" class="truncate" title="Hello">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non leo vel dui accumsan pharetra at vel dui. Integer eu volutpat quam, in ornare lectus. Aliquam elit tortor, tincidunt ac magna eget, sagittis pretium metus. Quisque non lorem tincidunt, pulvinar ligula eu, interdum augue. Nulla posuere, diam non feugiat auctor, nunc orci mollis quam, ut tempus orci purus vitae mauris. Pellentesque sodales mauris sed fringilla porta. Nulla pulvinar ipsum turpis, sed vehicula massa viverra lobortis. Integer convallis, dui condimentum tempus gravida, leo nunc mattis dolor, in lacinia velit ligula sit amet enim. Nullam varius facilisis tellus sed rutrum. Morbi auctor mi auctor dolor cursus, ut semper orci elementum. Mauris eget cursus risus. Suspendisse hendrerit luctus odio, non blandit turpis maximus at. Morbi congue augue dui, ut ultrices nisl pretium sit amet. Curabitur in nulla diam. Donec scelerisque lacinia lacinia.      </td>
    </tr>
  </tbody>
</table>

Answer 3

was researching the same subject, as I am using Angularjs, it was very easy, I will leave Aki if anyone needs, I used an angle filter, the limiteTo, then I used ng-if, for q if it has more q x characters, show "...":

 <td>{{item.t0031_razao | limitTo : 30 : 0}} <a ng-if="item.t0031_razao.length > 30">...</a> </td>

the result was thus: