1

I need to find a smart way of truncating a string based on a specific scope or window. There is an absolute example too, that is Instagram's profile page. If you go there and reduce the screen size, you'll see username gets cropped from last characters each time respectively to the screen size.

How to do that in Javascript?

elmeddinkamalli
  • 25
  • 7
  • No JavaScript necessary: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – Felix Kling Sep 22 '20 at 12:40
  • In JavaScript? It's really, really awkward. In CSS? It's fairly easy, see [here](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) and [here](https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/). – T.J. Crowder Sep 22 '20 at 12:40
  • I don't use Instagram but it sounds like they've just added a style to a DIV element - probably "overflow:hidden" as this just hides anything that doesn't fit into the DIV – ATD Sep 22 '20 at 12:41
  • At least related: https://stackoverflow.com/questions/2525388/js-jquery-trying-to-fit-an-arbitrary-text-string-within-a-certain-width-through – T.J. Crowder Sep 22 '20 at 12:42
  • Thanks for the reply but I have a very similar web design to Instagram's profile page. There is some stuff in front of the username. I want all of that to stay in one line. With overflow, it works but only if the username reaches the screen, other stuff gets wrapped. I don't know if I explained clearly, but the example is very similar to what I need to do. – elmeddinkamalli Sep 22 '20 at 12:51

2 Answers2

2

you dont need javascript, use CSS

.ellipsify {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}
Leonardo Filipe
  • 1,534
  • 15
  • 9
1

In CSS:

style="text-overflow: clip; overflow: hidden;
white-space: nowrap;"<br>
<div style="text-overflow: clip; overflow: hidden;
white-space: nowrap;">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>
<hr>
style="text-overflow: ellipsis; overflow: hidden;
white-space: nowrap;"<br>
<div style="text-overflow: ellipsis; overflow: hidden;
white-space: nowrap;">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>

With JavaScript (Not recommended: CSS recommended. 1.5 allows for margin/padding hoping they will not be font-size or larger. kinda iffy... Element must be already present, Needs to be recalculated if element width decreases, looses/doesn't show rest if element width increases/needs to be re-set from variables, etc.):

var clipdiv=document.getElementById("divToClip");

while(
  parseFloat(getComputedStyle(clipdiv).height)
  >
  1.5*parseFloat(getComputedStyle(clipdiv).fontSize)
)
  clipdiv.innerText
  =
  clipdiv.innerText.slice(0,clipdiv.innerText.length-2);
<div id="divToClip">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>
iAmOren
  • 2,760
  • 2
  • 11
  • 23