title: Ellipsis not working
body: <p>I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.biz-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 600px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section-segment"&gt;
    &lt;span class="biz-desc"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus nisi non tellus pharetra, nec tempus mi fringilla. Vestibulum consequat dolor sit amet orci suscipit, id facilisis metus tempus. Maecenas in massa eget nisl porttitor molestie id ut velit. Nullam quis purus porttitor neque fermentum dignissim quis nec felis. Aenean non maximus quam, sit amet tincidunt sapien. Nam ut gravida libero. Quisque tortor ante, maximus sit amet nunc at, convallis posuere felis. Proin venenatis sit amet metus eu porta.&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My idea is that the description will be truncated and will display three dots (...) when the text is too long for the screen.</p>
  
  <p>This is not working, however. I’m just getting long text that gets out from the <code>div</code>'s border.</p>
  
  <p>I tried to add <code>max-width: 600px;</code> to <code>.biz-desc</code> but to no avail.</p>
  
  <p>Can anyone see what is the problem or to tell me how to achieve this modest requirement?</p>