li设置over-flow:hidden失效

问题：给li设置over-flow:hidden失效

1、html

<ul class=" lotteryNameList">
    <li class="name">讲讲讲讲讲讲讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
    <li class="name">讲讲</li>
</ul>

2、css

.lotteryNameList{
    font-size: 19px;
    padding: 10px;
    border: 1px solid #d6d2d2;
    width: 100%;
    box-shadow: 0 0 4px 5px #d6d2d2;
    margin-top: 30px;
    background-color: #fff;
    min-height: 200px;
    display: none;
}

.name{
    display: inline-block;
    width: 134px;
    text-align: center;
    overflow: hidden;
  
}

3、显示效果

4、从上面可以看出来over-flow:hidden并没有生效

5、让其生效的条件：设置width   height   over-flow属性

6、修改后的css

.name{
    display: inline-block;
    width: 134px;
    text-align: center;
    overflow: hidden;
    height:37px;
    line-height: 37px;
}

7、修改后显示的样式