title: Transition of height with "white-space: nowrap" involved: possible with fewer Javascript?
body: <h2>Subject</h2>
  
  <p>I have a text-box that hides overflowing text with ellipsis. Only one line is visible.</p>
  
  <p>I accomplished this using <code>text-overflow</code> and <code>white-space: nowrap</code>. The element has a fixed <code>height</code> value.</p>
  
  <p>When tapped/clicked the box should smoothly expand (it's height) to show the rest of the text.</p>
  
  <p>I accomplished this using CSS transitions and Javascript. A hidden "shadow" description container contains the same text without white-space and overflow handling. It has the full height. When toggeling the actual box I set the <code>height</code> value read from the "shadow" element and add a class that will remove the white-space and overflow stuff. The <code>transition: height</code> option makes this change smooth.</p>
  
  <h2>Question</h2>
  
  <p><strike>I'd like to do this without extra Javascript logic and without the shadow element.</strike><br>
  I'd like to do this without</p>
  
  <ul>
  <li>using <code>setTimeout()</code> to wait for the transition</li>
  <li>the shadow element </li>
  </ul>
  
  <p>Only removing <code>white-space</code> and <code>text-overflow</code> does not work because they're not transitionable.</p>
  
  <p>I'm curious if there's another trick that does this.</p>
  
  <h2>Working code</h2>
  
  <p>Fiddle: <a href="http://jsfiddle.net/ywQTd/" rel="nofollow">http://jsfiddle.net/ywQTd/</a> (Make the window small enough to trigger <code>text-overflow: hidden</code>)</p>
  
  <p>CSS:</p>
  
  <pre><code>#control {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
  
      background-color: rgba(0,0,0, 0.05);
  }
  
  .description {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background-color: rgba(0,0,0, 0.2);
      color: rgb(255,255,255);
      padding: 0 10px;
  
      line-height: 25px;
      transition: height 0.5s ease;
  
      text-align: center;
  }
  
  #description {
      height: 25px;
  }
  
  #description.expand {
      overflow: hidden;
      text-overflow: initial;
      white-space: normal;
  }
  
  #shadow-description {
      position: absolute;
      top: -10000px;
  
      text-overflow: initial;
      overflow: visible;
      white-space: normal;
  }
  </code></pre>
  
  <p>Click Handler (in jQuery on-load Fn):</p>
  
  <pre><code>$("...").on("click", function(){
      var h = $("#shadow-description").height(),
          $el = $("#description");
  
      if ($el.hasClass("expand")) {
          $el.css({height: ""});
  
          setTimeout(function(){
              $el.removeClass("expand");
          }, 200);
      } else {
          $el.css({height: h + "px"}).addClass("expand");
  
      }
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="control"&gt;
      &lt;div id="description" class="description"&gt;lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet&lt;/div&gt;
      &lt;div id="shadow-description" class="description"&gt;lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h3>Update</h3>
  
  <p>The initial title was</p>
  
  <blockquote>
    <p>Transition of height with "white-space: nowrap" involved: is there a JS-less way?</p>
  </blockquote>
  
  <p>I've changed it because it was not clear enough. Of course it's not possible without Javascript since there has to be a click handler that will do "something". But I'd like to archive the goal with fewer Javascript <em>logic</em> and without timing in Javascript. ;)</p>
  
  <p>Further I've clarified the first paragraph in the <strong>Question section</strong>.</p>
  
  <hr>
  
  <h3>Addendum</h3>
  
  <p>@jme11 kindly pointed out that my solution has some accessibility and SEO related issues. Yes, that's right, this example has these issues. But I've only extracted the relevant part of my code. Within the application both do not really matter: the page is rendered on the backend so that it works without Javascript, the shadow element is not present there. It then "progressively enhances" and completely re-renders. The "shadow element" might then still be a problem for clever search engines but I guess there's an attribute that would mark this as SEO-unrelated. The accessibility issue is a good point but I'm sure there is some <em>ARIA</em> attribute that mutes this element.</p>
  
  <p>But since I'd like to get rid of the shadow element anyway all this is not that interesting, is it?</p>