li设置over-flow:hidden失效

分手后的思念是犯贱 2022-06-03 07:27 96阅读 0赞

问题：给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、显示效果

![Center][]

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、修改后显示的样式

![Center 1][]

[Center]: /images/20220603/d60f3612ce9c4d1e9c034df1989f2c5d.png
[Center 1]: /images/20220603/603a26e83cc04e0ea688bae76c690408.png

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关设置浮动的li如何在ul水平居中

浮动的li如何在ul水平居中解决方法： ul的父级div标签设置text-align: center; ul设置：[http://www.yayihouse.co

叁歲伎倆/ 2023年06月10日 12:27/ 0 赞/ 4 阅读

相关 Jenkins设置中文以及设置中文失效的问题

Jenkins设置中文 1. 找到插件管理： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

红太狼/ 2022年12月27日 02:21/ 0 赞/ 1516 阅读

相关 token失效或重新设置

common.php public function _init($token) { parent::_init($toke

小鱼儿/ 2022年12月12日 13:54/ 0 赞/ 250 阅读

相关 ul li 设置边框后重合的解决办法

改ul li 设置边框后，会产出重合的现象 ![20200927152952255.png][] 解决办法就是给他设置margin去重复 li {

灰太狼/ 2022年12月11日 01:26/ 0 赞/ 200 阅读

相关 html li圆点单独颜色,html中li标签可以设置颜色吗

在HTML中如果在ul>li中添加子标签>a链接，修改li中或者是有什么方法可以让修改li的字体颜色时，a标签的字体颜色也改变， ……由于CSS的层叠(cascading)，

「爱情、让人受尽委屈。」/ 2022年10月05日 10:46/ 0 赞/ 476 阅读

相关 HttpServletResponse设置ContentType失效

现象：使用postman测试响应ContentType没有值 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_sha

小鱼儿/ 2022年09月09日 14:55/ 0 赞/ 171 阅读

相关 li中的span设置float:right不生效

li中的span设置float:right不生效：部分html代码如下： <li> <span id='one'></span>

Myth丶恋晨/ 2022年06月07日 06:47/ 0 赞/ 227 阅读

相关 li设置over-flow:hidden失效

问题：给li设置over-flow:hidden失效 1、html <ul class=" lotteryNameList"> <li class=

分手后的思念是犯贱/ 2022年06月03日 07:27/ 0 赞/ 97 阅读

相关 LIS

LIS 通过LCS求解直接dp O(nlogn)优化通过LCS求解 include<bits/stdc++.h> using

素颜马尾好姑娘i/ 2021年11月09日 15:36/ 0 赞/ 286 阅读

相关 couchbase 设置ttl失效的bug

我们都知道，业内的所有nosql数据库在存储的时候基本都可以对key设置一个ttl——（time to live），也就是失效时间。这个功能非常有用，特别是在缓存数据的更新，以

怼烎@/ 2021年06月24日 15:57/ 0 赞/ 462 阅读