Show only the last part of the line

Question

How to display only the last part of a line if it is larger than my width divwithout line breaks? For example. " ...string" instead

This is my
very large string

UPD: This solution works, but when I have a big word, for example. url http://myhost/path/foo/bar?and=some¶ms=theredisplays only part of the character, this is not good. Any ideas?

Answer 1

You can do this with direction: rtl;, but it will not 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>

Run codeHide result

Or you can use jQuery and take the last word from the text, and the width pwill be dynamic and adjust the width of the 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>

Run codeHide result