Display arrow when there is overflow:hidden - html

Question

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 ... when there is an overflow of text above certain width. Kindly help me how Display arrow when there is overflow:hidden?
http://jsfiddle.net/rP5q3/1/
.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;
}

Answer 1

You can use jQuery to run what you are trying. Of course is an example, if you could explain a bit more what are you trying to do I think I will be able to make a simple code to make it work with jQuery.
var arrowBox = $("div").find(".arrow_box");
if (arrowBox.css({"overflow" : "hidden"}){
// jQuery code to display the arrow when "overflow:hidden;"
};
Here you have a demo on JSFiddle.