html - 溢出隐藏不适用于相对容器和绝对元素解决方案

Question

我在将 span 隐藏在 div 中时遇到一点问题。我查看了 stackoverflow 的相关问题，得出的结论是要隐藏的元素应该绝对定位，而包含该元素的容器应该相对定位。我已经实现了解决方案，但它仍然无法正常工作。

HTML:

<div class="column1">
    <div class="menuitem">
        <div class="leftmenuitem"><span class="title">MEAT SHAWARMA</span><span class="dots"></span>

        </div>
        <div class="rightmenuitem">$3.99</div>
        <div class="leftmenuitem"><span class="title">CHICKEN SHAWARMA</span><span class="dots"></span>

        </div>
        <div class="rightmenuitem">$3.99</div>
    </div>
    <div class="menuitem">
        <div class="leftmenuitem"><span class="title">SOJUK</span><span class="dots"></span></span>
        </div>
        <div class="rightmenuitem">$4.49</div>
        <div class="leftmenuitem"><span class="title">SAUSAGE</span><span class="dots"></span></span>
        </div>
        <div class="rightmenuitem">$4.49</div>
        <div class="leftmenuitem"><span class="title">BASTERMA</span><span class="dots"></span></span>
        </div>
        <div class="rightmenuitem">$4.49</div>
    </div>
</div>

CSS:

.column1 {

    float:left;

    width:50%;

}

.column2 {

    float:left;

    width:50%;

}

.menuitem {

    margin-bottom:10px;

    margin-top: 30px;

    position:relative;

    overflow:hidden;

}

.leftmenuitem {

    width:90%;

    float:left;

    position: relative;

}

.dots {

    position: absolute;

    bottom: 5px;

    left: 0;

    right: 0;

    z-index: 1;

    margin: 0;

    border: 0;

    height: 3px;

    display: block;

    background-image: radial-gradient(circle closest-side, #b3b3b3 99%, rgba(0, 0, 0, 0) 1%);

    background-position: bottom;

    background-size: 6px 3px;

    background-repeat: repeat-x;

    overflow:hidden;

}

.title {

    position: relative;

    z-index: 5;

}

.rightmenuitem {

    width:10%;

    float:right;

    text-align:right;

    position: relative;

}

JSFIDDLE:

http://jsfiddle.net/oct9jydv/

Answer 1

我通过在 .title 中添加 background-color:#fff; 解决了这个问题