2

I'm want to collapse a long text to a single line and show a MORE link on the right. The expanded text should show a LESS link on the bottom and also on the right. Some examples could make it clear:

text text text MORE

text text text text
text           LESS

The collapsed state seems to work fine with position: relative; float: right, but I don't know how to achieve the expanded state. There's nothing like float: right-bottom (actually even simulating float: bottom needs a complicated hack, but this hack doesn't seem to be usable in my case). The algorithm is trivial: 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), but how to tell the browser?

More examples, how it should work.

text           MORE

text a_long_word
text text text LESS

text a_long_word
an_even_longer_word
               LESS

Note that the line text MORE should be produced as a shortened version of the lines below.

I sort of got it working with something like

<div><a>MORE</a><span>the text....</span><a>LESS</a></div>

hiding one of the links, and setting overflow: hidden; height: 20px; in the collapsed case. Now, I'd like to get text-overflow: ellipsis, too...

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 MORE absolutely and call it a day.

Community
  • 1
  • 1
maaartinus
  • 44,714
  • 32
  • 161
  • 320

1 Answers1

0

That seems really simple with CSS, unless I'm missing something. What about this? http://codepen.io/pageaffairs/pen/AwfoI

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {width: 20%; margin: 30px; background: #f7f7f7; overflow: hidden;}
b {float: right;}

</style>
</head>
<body>

<div>
    <span>text</span> <b>MORE</b>
</div>

<div>
    <span>text a_long_word text text text</span> <b>LESS</b>
</div>

<div>
    <span>text a_long_word an_even_longer_word</span> <b>LESS</b>
</div>

</body>
</html>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • I see I was doing something wrong.... but what you're missing: The text in your first `div` should be as long as the second or third one, but constrained to a single line by the style. – maaartinus Jun 19 '14 at 03:42