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

what i'm trying do

i have size-limited box supposed contain text:

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

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

however, if text becomes long fit in box, want replace text different, shorter version, have prepared in advance.

so example, if want populate 2 boxes these 2 names:

short version      long version ------------------------------------------------------------ rudolf e. raspe    rudolf erich raspe baron munchausen   hieronymus karl friedrich von munchhausen 

then first box contain "rudolf erich raspe" since it's short enough fit inside, second box contain "baron munchausen" since baron's full name long fit.

how can set such box, using html5 , css3? browser compatibility important but, don't need accommodate old versions or internet explorer prior 11.

alternatives

i can choose of standard options handling too-long text - letting overflow, or cutting via overflow: hidden, or adding scrollbars, or adding ellipses, or of other standard solutions. since have short versions of every possible text there, use these instead.

i can in javascript by, example, using wrapper , comparing size box's. non-javascript solution, if possible.

what i've tried

so far thought making text somehow push down if it's long (some combination of white-space , word-wrap?), making container overflow: hidden hide when it's down there, , placing short version of text behind it, couldn't work while still allowing text occupy more 1 line.

another approach place element short text below element long text, , use transform makes short element take on when it's pushed down much... couldn't work either.

so... other ideas?

there 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>        text fits       <em>fallback text</em>     </span>  </div>    <div class="box">     <span>        huge text doesn't fit , it's more 3 lines. lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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>        text doesn't fit       <em>fallback text</em>     </span>  </div>

it's not pretty solution, hey it's something. :)