Oak Oak - 4 months ago 8
HTML Question

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

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 IE<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 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 couldn't get it to work either.

So... any other ideas?

Answer

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. :)

If the text becomes on 3 lines... then this will break as well.

Update: Now it won't break on 3 lines. :)