有溢出时显示箭头:隐藏

时间:2014-05-31 17:33:13

标签: html css css3

以下是我的jsfiddle工作正常没有溢出:隐藏但我必须使用此属性因为如果我不使用它我不能放置...当超过一定宽度的文本溢出。请帮我看看溢出时的显示箭头:隐藏?

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;
}

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery来运行您正在尝试的内容。当然是一个例子,如果你能解释一下你想做什么,我想我将能够制作一个简单的代码,使其适用于jQuery。

var arrowBox = $("div").find(".arrow_box");
if (arrowBox.css({"overflow" : "hidden"}){
// jQuery code to display the arrow when "overflow:hidden;"
};

您可以在此JSFiddle进行演示。