title: text-overflow and dynamic width of <div>'s that don't overflow
body: <p>I'm trying to use a style that will grow a border until you reach 300px and then will use text-overflow: ellipses when you reach the maximum. <a href="http://jsfiddle.net/L66fs1y5/1/" rel="nofollow">Click Here</a> to go to a JSFIDDLE that contains what I'm working on. </p>
  
  <p>I want the longest message text to stop at 300px and then show an ellipses. The shorter texts should make the border shrink to the size of the text. Any help is greatly appreciated.</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>.border{ 
      background-color: #ffffff; 
      border: 3px solid #ffffff; 
      border-radius: 5px; 
      box-shadow: 0px 0px 10px #999999; 
      margin-left: 20px; 
      margin-top: 5px; 
      padding: 2px; 
      position: relative; 
      z-index: 4;
  }
  
  .border.small { 
      /* background-image: url('%Image(G3VISIF_EXP_BKGRD_SM)'); */
      box-shadow: 1px 1px 10px #999999; 
      background-size: 100% 100%; 
      height: 22px;
      width: auto;
  }
  
  
  .message { 
      color: #5c5d60; 
      font-family: Arial; 
      font-size: 17px;
      font-weight: bold;
      padding-left: 5px; 
      padding-top: 2px;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 300px;
      display: block;
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="border small"&gt;
      &lt;div class="message"&gt;
          Is [GRIDREC:EMPLID] Equals 123456789012345678901234567890
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="border small"&gt;
      &lt;div class="message"&gt;
          Is Part Time
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="border small"&gt;
      &lt;div class="message"&gt;
          Recieves Full Benefits
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>