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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM