css 实现div内显示两行或三行,超出部分用省略号显示

一、div内显示一行,超出部分用省略号显示

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

二、div内显示两行或三行,超出部分用省略号显示

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;(行数)
    -webkit-box-orient: vertical;

三、表格中单行超出隐藏

table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */}
td{
width:100%;
word-break:keep-all; // 不换行
white-space:nowrap; // 不换行
overflow:hidden;
text-overflow:ellipsis;
}

 四、span超过换行

span{
    white-space: nowrap;  /*强制span不换行*/
    display: inline-block;  /*将span当做块级元素对待*/
    width: 100%;  /*限制宽度 可设px*/
    overflow: hidden;  /*超出宽度部分隐藏*/
    text-overflow: ellipsis;  /*超出部分以点号代替*/
}

转载自:https://www.cnblogs.com/v616/p/11281855.html

https://blog.csdn.net/qq_43962582/article/details/123015119

https://www.csdn.net/tags/MtTakg2sMDA0MTktYmxvZwO0O0OO0O0O.html

posted @ 2022-02-13 00:01  Chaplink  阅读(1417)  评论(0编辑  收藏  举报