Display only last part of string

Question

How to display only last part of string, if it more than my div width without line breaks? E.g. "...string" instead of

This is my
very large string

UPD: This solution works, but when i have a large word, e.g. url http://myhost/path/foo/bar?and=some&params=there displays only part of symbol, it is not good. Any ideas?

thanks, it is works, but not in all cases. Please, see updated question fore more information. — Ilya
– Ilya, Commented Feb 16, 2016 at 13:03
No, it's doubtful if it would work in all cases. It's not a standard request. — Paulie_D
– Paulie_D, Commented Feb 16, 2016 at 13:06

Nenad Vracar · Accepted Answer · 2016-02-16 13:17:40Z

4

You can do this with direction: rtl; but its not going to work in Chrome

div {
  white-space: nowrap; 
  padding: 0 10px;
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
  direction: rtl;
}

<div>This is my
very large string</div>

Or you can use JQuery and take last word from text, also the width of p will be dynamic and adjust to width of last word.

var part = $('p').text().split(' ');
$('p').text('... '+part[part.length-1]);

p {
  white-space: nowrap; 
  padding: 0 10px;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is my
very large string</p>

edited Feb 16, 2016 at 13:17

answered Feb 16, 2016 at 12:50

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilya Over a year ago

unfortunately, my users use Chrome mostly(

Dirk Boer Over a year ago

hmm seems to work in Chrome on 24 november 2017... does this mean that the top version is the recommended way? I like CSS solution above JQuery

Collectives™ on Stack Overflow

Display only last part of string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related