Without JavaScript, can I show a different text when a longer one won't fit?

Question

What I'm trying to do

I have a size-limited box which is supposed to contain some text:

.box {   width: 100px;   height: 40px;   background-color: yellow; }

<div class="box">   Some text goes here. </div>

However, if the text becomes too long to fit in the box, I want to replace that text with a different, shorter version, which I have prepared in advance.

So for example, if I want to populate two boxes with these two names:

Short version      Long version ------------------------------------------------------------ Rudolf E. Raspe    Rudolf Erich Raspe Baron Munchausen   Hieronymus Karl Friedrich von Munchhausen 

Then the first box will contain "Rudolf Erich Raspe" since it's short enough to fit inside, but the second box will contain "Baron Munchausen" since the Baron's full name is too long to fit.

How can I set up such a box, using just HTML5 and CSS3? Browser compatibility is important but, I don't need to accommodate really old versions or Internet Explorer prior to 11.

Alternatives

I can choose any of the standard options for handling too-long text - letting it overflow, or cutting it via overflow: hidden, or adding scrollbars, or adding ellipses, or any of the other standard solutions. But since I already have short versions of every possible text there, I would like to use these instead.

I can do this in JavaScript by, for example, using a wrapper and comparing its size with the box's. But I would like a non-JavaScript solution, if possible.

What I've tried

So far I thought about making the text somehow push itself down if it's too long (some combination of white-space and word-wrap?), making the container overflow: hidden to hide it when it's down there, and placing the short version of the text behind it, but I couldn't get it to work while still allowing the text to occupy more than one line.

Another approach is to place an element with the short text just below the element with the long text, and use some transform which makes that short element take over when it's pushed down too much... But I couldn't get it to work either.

So... any other ideas?

Answer 1

There is a way... kinda...

.box {    width: 100px;    height: 18px;    background-color: yellow;    overflow: hidden;    position: relative;    margin-bottom: 20px;  }    span {  position: absolute; bottom: 0; left: 0; width: 100%; max-height: 36px;  }  em { position: absolute; width: 100%; top: 18px; left: 0; background-color: yellow; }

<div class="box">     <span>        This text fits       <em>fallback text</em>     </span>  </div>    <div class="box">     <span>        Huge text that doesn't fit and it's more than 3 lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       <em>fallback text</em>     </span>  </div>    <div class="box">     <span>        This text doesn't fit       <em>fallback text</em>     </span>  </div>

It's not a very pretty solution, but hey it's something. :)