移动端background:cover无法全屏覆盖及滚动、文字截断问题排查

1. 视口适配异常（水平/垂直滚动） #

浏览器默认给html、body元素添加了margin和padding，即使设置了height:100vh也会被撑开产生滚动。加上以下样式重置：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 强制禁用滚动，确保页面完全适配视口 */
}

同时全局开启盒模型统一，避免子元素宽高溢出：

* {
  box-sizing: border-box;
}

2. background-size:cover失效+桌面端垂直滚动 #

background-size:cover依赖容器有明确的尺寸。给body设置背景时，需确保html和body的高度被正确继承：

html {
  height: 100%;
}
body {
  min-height: 100vh;
  background-image: url('你的背景图地址');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

如果容器内有浮动元素，会导致高度坍塌引发滚动，给容器添加清除浮动的样式：

.container::after {
  content: "";
  display: table;
  clear: both;
}

3. 文字截断问题 #

针对不同场景调整：

• 若容器设置了固定高度导致文字溢出：

.text-wrap {
  height: auto; /* 改为自适应高度，或设置足够容纳文字的高度值 */
  overflow: visible;
}

• 若误设置了文字省略号属性导致截断：
  检查是否存在white-space: nowrap、overflow: hidden、text-overflow: ellipsis组合，不需要的话直接移除；需要省略号则确保三者同时设置。
• 排查父元素是否有clip-path、overflow: hidden等属性意外截断文字，按需调整。

内容的提问来源于stack exchange，提问作者Saad Mansoor