Make the amount of first and last characters displayed to be responsive to the width available

Question

Maybe someone know how to make text or numbers inside a table cell dynamically change. And if the number or text does not fit into the cell, it was cut off in the middle with an ellipsis, and the letters or numbers that extreme from it hidden or appeared entirely when resizing?

OA210815LXRR1I OA210...LXRR1I OA2...RR1I

I'd like to create something like this: js fiddle

but I don't know how to fix the letter clipping problem when you resize

Does [this](https://stackoverflow.com/a/36470401/13891083) answer your question? — InspectorGadget, Nov 15 '21 at 10:52

score 0 · Answer 1 · edited Nov 15 '21 at 13:02

Try to do this :

    var MaxLen = 10;
    var limiLen = 5;
    var text = document.getElementById("text-test");
    
    if (text.innerHTML.trim().length > MaxLen) {
      var newTest =
        text.innerHTML.trim().substr(0, limiLen) +
        "..." +
        text.innerHTML
          .trim()
          .substr(text.innerHTML.trim().length - limiLen, limiLen);
    
      text.innerHTML = newTest;
    }

<html>
<head>
  <title> Response </title>
  <meta charset="UTF-8" />
</head>

<body>
  <div>
    <p id="text-test"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </p>
  <div> 
  <script src="index.js">
  </script>
</body>
</html>

Make the amount of first and last characters displayed to be responsive to the width available

1 Answers1