因为工作原因，需要设置文字自适应显示一行，超出用...代替，因此整理出来巩固记忆。
主要依赖的属性如下所示：
/* 强制文字一行内显示 */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 用省略号替代超出部分 */ text-overflow: ellipsis;完整代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将页面平均分成四部分</title> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100%; position: absolute; } .quarter-div{ width: 33%; height: 33%; float: left; /* 强制文字一行内显示 */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 用省略号替代超出部分 */ text-overflow: ellipsis; } .blue{ background-color: #5BC0DE; } .green{ background-color: #5CB85C; } .orange{ background-color: #F0AD4E; } </style> </head> <body> <div class="main"> <div class="quarter-div blue">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div> <div class="quarter-div green">我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好</div> <div class="quarter-div orange">你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢</div> </div> </body> </html>页面显示如下：
调整浏览器可显示区域的大小，依然可以正常显示：
参考文献：https://www.jianshu.com/p/8b61786491fc
