网页元素超出设置的页面宽度快速解决方案（在移动端如何禁用水平滚动条）

最近博客在编辑一些文章后在移动端访问页面会出现页面宽度 额外的向右延长 空余部分。首页上出现的该问题经调试发现是文章缩略卡片中长字段未缩略处理而出卡片的界照成的，解决方案就是在控制 文章缩略卡片 的CSS样式表上找到对应项添加：

overflow: hidden; text-overflow: ellipsis

实际操作案例如下：

.article-entry p,
.article-entry table {
    line-height: 1.6em;
    margin: 1.6em 0;
    /*以下为新增的内容*/
    overflow: hidden;
    text-overflow: ellipsis;
}

但解决了首页的该问题，进入到文章中在使用同样的方法却怎样都无法见效，就究其根本原因应该是还找不到那个照成 页面宽度额外的向右延长空余部分 的那个具体原因（可能是某个网页元素），但找到的一个简单粗暴的方法一劳永逸地解决了该问题（到最后也没找到那个原因所以直接强制解决了吖捂脸），解决方法就是在移动端（其实全端都一样，只是移动端出现这种问题） 禁用水平滚动条 ，那么具体该怎么实现呢？

实现方法

在和标签中添加 CSS 样式:

overflow-x:hidden

实际操作案例如下：

<html style="overflow-x:hidden">
<!-- 此处省略 N 行代码 -->
<body style="overflow-x:hidden">

实测了目前的 QQ、微信浏览器均可生效。岂不美哉。

参考资料

移动端如何禁用横向滚动条? - 知乎
https://www.zhihu.com/question/23327222

本页由 matcha 整理和发布，采用知识共享署名4.0 国际许可协议进行许可，转载前请务必署名
文章最后更新时间为：February 19th , 2021 at 11:10 am
分享到：Twitter Weibo Facebook