DIV 对象和 TABLE 表格超出容器宽度强制换行或省略

通用方案

溢出内容显示省略号

将溢出内容显示省略号关键代码 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; 一起使用。*/
}