title: Dynamic text inside button during a browser zoom
body: <p>On Firefox browser (version 35.0.1), my button looks like so:</p>
  
  <p><img src="https://i.stack.imgur.com/cxi0e.png" alt="enter image description here"></p>
  
  <p>However, after zooming out in the browser, some of the text starts to get cut off:</p>
  
  <p><img src="https://i.stack.imgur.com/BPNYn.jpg" alt="enter image description here"></p>
  
  <p>I tried seeing if <code>text-overflow</code> or <code>text-rendering</code> had something that could help. However, I do not want to use ellipsis and messing with the rendering CSS didn't seem to work. I want the text to dynamically changed in size as a zoom out (or a zoom in) happens. Is there a way to do this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;td&gt;
      &lt;button id="ctl00_phBody_btnReplaceDrive" class="btn btn-primary" style="width: 100%; text-align: left;" onclick="return ChooseDiskToReplace();"&gt;
          &lt;i class="icon-exchange" style="padding-right: 7px"&gt;&lt;/i&gt;
          Replace existing hard drive
      &lt;/button&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.btn-primary {
      color: #FFF;
      background-color: #565656;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  }
  .btn {
      display: inline-block;
      margin-bottom: 0px;
      font-weight: normal;
      vertical-align: middle;
      cursor: pointer;
      background-image: none;
      border: 1px solid transparent;
      white-space: nowrap;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857;
      border-radius: 3px;
      -moz-user-select: none;
  }
  </code></pre>