通用方案

溢出内容显示省略号

将溢出内容显示省略号关键代码 text-overflow: ellipsis;

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

溢出内容直接隐藏

单行文字高度根据字体尺寸设置 height: 20px;

display: block;
overflow: hidden;
height: 20px;

div 区块布局

.div{
    word-break: break-all; /*英文,以字母作为换行依据*/
    word-wrap: break-word; /*英文,以单词作为换行依据*/
    white-space: pre-wrap; /*中文,强制换行*/
}

table 表格布局

table{
 
    table-layout:fixed;/* 只有定义了表格的布局算法为 fixed,下面 td 的定义才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时:hidden 隐藏 overlay 底部滑动条 scroll 全局滚动条 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记 (...) ;需与 overflow:hidden; 一起使用。*/
}

何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注