单行、多行文本溢出显示省略号以及padding的使用总结

小同学L

已于 2022-03-20 11:21:23 修改

阅读量1.9k

点赞数 6

文章标签：前端 html css

于 2022-03-20 11:19:20 首次发布

本文链接：https://blog.csdn.net/remmus98/article/details/123608513

版权

一：单行文本溢出显示省略号

overflow:hidden; （超出限定的宽度就隐藏内容）

white-space: nowrap; （设置文字在一行显示不能换行）

text-overflow: ellipsis;（规定当文本溢出时显示省略符）

注：需要给盒子设置宽度

若是盒子嵌套盒子，比如div>ul>li，如果给ul添加单行文本溢出显示省略号的话，则多余的部分将显示空白，而不是省略号，这多用于左右滑动的样式

代码如下：

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav {
            margin: 50px auto;
            padding: 0 15px;
            width: 180px;
            height: 30px;
            background-color: pink;
           
          
        }

        .nav ul {
            display: flex;
            justify-content: space-between;
              /* （超出限定的宽度就隐藏内容) */
              overflow: hidden;
            /* （设置文字在一行显示不能换行） */
            white-space: nowrap;
            /* （规定当文本溢出时显示省略符） */
            text-overflow: ellipsis;
          
        }

        .nav li {
            list-style: none;
        }

        .nav li a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">美妆 Beatuy</a>
            </li>
            <li>
                <a href="#">纸尿裤 Diapers</a>
            </li>
        </ul>
    </div>

</body>

若某个盒子里面只有文字，如果给该盒子添加单行文本溢出显示省略号的话，则超出宽度的多余文字将会以省略号的形式显示

代码如下：

 <style>
        .txt {
            width: 150px;
            height: 30px;
            background-color: pink;
            /* （超出限定的宽度就隐藏内容) */
            overflow: hidden;
            /* （设置文字在一行显示不能换行） */
            white-space: nowrap;
            /* （规定当文本溢出时显示省略符） */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="txt">我好想吃火锅好想吃火锅</div>
</body>

二：多行文本溢出显示省略号

.jyy {

word-break: break-all; //允许单词内换行

overflow: hidden; //溢出隐藏

text-overflow: ellipsis; //溢出部分省略号表示

display: -webkit-box; //开启弹性

-webkit-line-clamp: 2; //控制第几行出现省略号

-webkit-box-orient: vertical; //垂直对齐方式

}

注：需要给盒子设置宽度高度

代码如下：

 <style>
        .txt {
            width: 300px;
            height: 42px;
            background-color: pink;
            /* //允许单词内换行 */
            word-break: break-all;
            /* //溢出隐藏 */
            overflow: hidden;
            /* //溢出部分省略号表示 */
            text-overflow: ellipsis;
            /* //开启弹性 */
            display: -webkit-box;
            /* //控制第几行出现省略号 */
            -webkit-line-clamp: 2;
            /* //垂直对齐方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div class="txt">我好想吃火锅好想吃火锅我好想吃火锅好想吃火锅我好想吃火锅好想吃火锅我好想吃火锅好想吃火锅</div>
</body>

三：padding的注意事项（盒子与内容之间的距离）

给行内元素设置padding-left，padding-right不会撑开盒子的宽度；

给盒子设置padding-left，padding-right会撑开盒子的宽度，多出的部分就是padding值

给行内元素设置padding-top，padding-top不起作用；

给盒子设置padding-top，padding-bottom会撑开盒子的高度，多出的部分就是padding值

代码如下：

 <style>
        div {
            width: 600px;
            height: 30px;
            background-color: pink;
            margin-bottom: 20px;
        }

        .box1 {

            padding-left: 20px;
        }

        .box2 span {
            padding-left: 20px;
        }
        .box3  {
            padding-top: 20px;
        }
        .box2 span {
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <div class="box1">给盒子1加的padding-left</div>
    <div class="box2"> <span>给盒子2的span加的padding-left</span> </div>

    <div class="box3">给盒子3加的padding-top</div>
    <div class="box4"> <span>给盒子4的span加的padding-top</span> </div>
    
</body>

小同学L

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
单行、多行文本溢出显示省略号以及padding的使用总结

一：单行文本溢出显示省略号overflow:hidden; （超出限定的宽度就隐藏内容）white-space: nowrap; （设置文字在一行显示不能换行）text-overflow: ellipsis;（规定当文本溢出时显示省略符）注：需要给文本设置宽度，若是盒子嵌套盒子，比如div>ul>li；设置单行文本省略的话不会显示省略号，而是直接显示空白。二：多行文本溢出显示省略号.jyy { word-break: break-all; ...
复制链接

扫一扫