title: Display arrow when there is overflow:hidden
body: <p>Following is my jsfiddle which works fine without overflow:hidden but I have to use this property cause if I dont use it i am not able to put <code>...</code> when there is an overflow of text above certain width. Kindly help me how Display arrow when there is overflow:hidden?</p>
  
  <p><a href="http://jsfiddle.net/rP5q3/1/" rel="nofollow">http://jsfiddle.net/rP5q3/1/</a></p>
  
  <pre><code>.arrow_box {
      position: relative;
      background: #1D2027;
      border: 4px solid #1D2027;
      width:50%;
      color:white;
      display:inline-block;
        float:left;
        margin-left:2px;
        color:#FFF;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow:hidden !important;
  }
  .arrow_box:after, .arrow_box:before {
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  
  .arrow_box:after {
      border-color: rgba(29, 32, 39, 0);
      border-left-color: #1D2027;
      border-width: 14px;
      margin-top: -14px;
  }
  .arrow_box:before {
      border-color: rgba(29, 32, 39, 0);
      border-left-color: #1D2027;
      border-width: 20px;
      margin-top: -20px;
  }
  </code></pre>