前端学习：文本溢出隐藏

直接开整

单行文本隐藏

      .box {
            width: 150px;
            height: 30px;
            background-color: rgb(196, 196, 45);
            margin: 50px auto;
            white-space: nowrap;/*强制文本在一行显示*/
            overflow: hidden;/*超出盒子的文本隐藏不显示*/
            text-overflow: ellipsis;/*超出文本显示为省略号*/
        }


     <div class="box">我是大帅哥我是大帅哥</div>

多行文本溢出隐藏

.zibottom{
    font-size: 12px;
    line-height: 20px;
    color: rgb(128, 120, 120);
    overflow: hidden;/*文本溢出隐藏*/
    text-overflow: ellipsis;/*显示成省略号*/
    display: -webkit-box;/*对象作为伸缩盒子模型展示，我不太懂这条*/
    -webkit-line-clamp: 3;/*第三行开始省略*/
    -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */
}

<div class="zibottom">
如何面对并迎接全球挑战如何建立营销组织如何实现传统营销到数字化营销的转变
如何面对并迎接全球挑战如何建立营销组织如何实现传统营销到数字化营销的转变
</div>

 

建议保存，这是可以直接拿来用的。

注意无论是单行还是多行，都要设置容器宽高。 

拓展：overflow-x/y  这条属性主要用于移动端导航栏，pc端不会用到的，太丑了

        .hh {

            width: 400px;

            height: 44px;

            background-color: brown;

            overflow-x: auto;

            margin: none;

        }

        * {

            margin: 0px;

            padding: 0px;

        }

        ul {

            width: 1000px;

            height: 44px;

            background-color: coral;

            margin: none;

        }

        li {

            float: left;

            width: 100px;

            height: 44px;

            line-height: 44px;

            text-align: center;

            list-style: none;

            margin: none;

        }

结构处

<div class="hh">

        <ul>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            <li>songjun</li>

            </br><br />

        </ul>

    </div>

效果展示

这是pc端，会有滚动条，太难看了

 

这是移动端，图片展示不出效果，建议使用编辑器食用 。