title: Toggle collapse text to single line
body: <p>I'm want to collapse a long text to a single line and show a <code>MORE</code> link on the right. The expanded text should show a <code>LESS</code> link on the bottom and also on the right. Some examples could make it clear:</p>
  
  <pre><code>text text text MORE
  
  text text text text
  text           LESS
  </code></pre>
  
  <p>The collapsed state seems to work fine with <code>position: relative; float: right</code>, but I don't know how to achieve the expanded state. There's nothing like <code>float: right-bottom</code> (actually even simulating <code>float: bottom</code> needs a <a href="https://stackoverflow.com/questions/526035/html-css-positioning-float-bottom">complicated hack</a>, but this hack doesn't seem to be usable in my case). The algorithm is trivial: <em>If there's enough space after the text, put it at the end of the last line, otherwise, put it in a next line (also right-aligned)</em>, but how to tell the browser?</p>
  
  <p>More examples, how it should work.</p>
  
  <pre><code>text           MORE
  
  text a_long_word
  text text text LESS
  
  text a_long_word
  an_even_longer_word
                 LESS
  </code></pre>
  
  <p><em>Note that the line <code>text           MORE</code> should be produced as a shortened version of the lines below.</em></p>
  
  <p>I sort of got it working with something like</p>
  
  <pre><code>&lt;div&gt;&lt;a&gt;MORE&lt;/a&gt;&lt;span&gt;the text....&lt;/span&gt;&lt;a&gt;LESS&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>hiding one of the links, and setting <code>overflow: hidden; height: 20px;</code> in the collapsed case. Now, I'd like to get <code>text-overflow: ellipsis</code>, too...</p>
  
  <p>I'm not looking for a pure CSS solution. I know the height of the expanded text and if I also knew where it ends horizontally, I'd position <code>MORE</code> absolutely and call it a day.</p>