在响应式设计中，我们经常会遇到超宽或超高的元素溢出的问题，这不仅会影响页面的美观度和用户体验，还会导致页面排版混乱。为解决这个问题，我们需要采取一些措施，本篇文章将介绍一些解决方法。
CSS 属性解决方案
overflow 属性
overflow 属性用于指定内容溢出元素框的处理方式。当元素内容超出其指定的宽度和高度时，overflow 属性可以决定是将内容截断还是将元素框发生溢出。
常见的取值如下：
- visible：元素框不会被裁剪，超出元素框的内容会呈现在元素框之外。
- hidden：元素框发生溢出时，超出元素框的内容将被隐藏。
- scroll：元素框发生溢出时，会出现滚动条以便查看超出元素框的内容。
- auto：如果元素框发生溢出，则会出现滚动条。如果元素框未发生溢出，则不会出现滚动条。
使用该属性解决超宽或超高的元素溢出问题的示例如下：
-------- - ------ ----- ------- ----- --------- ----- -
text-overflow 属性
text-overflow 属性用于控制当文本溢出元素时是否应该截断文本，并用省略号（...）表示被截断的文本。该属性常用于应用于容器不太适合显示全部文本的情况，例如在表格的某个单元格内显示一个过长的文本串。
使用该属性解决超宽元素溢出问题的示例如下：
-------- - ------ ------ ------------ ------- --------- ------- -------------- --------- -
word-wrap 属性
word-wrap 属性用于控制长单词或 URL 是否可以自动换行。在默认情况下，长单词或 URL 会撑开元素框，导致元素溢出。使用该属性可以解决这个问题。
使用该属性解决超宽元素溢出问题的示例如下：
-------- - ------ ------ ---------- ----------- -
JavaScript 解决方案
计算元素尺寸并重新排布
使用 JavaScript 检测元素是否超出父级容器的尺寸，如果超出则重新计算元素的尺寸并进行重新排版。
以下是一个使用原生 JavaScript 实现的超出父级容器就重新计算尺寸的实例：
-------
-------- -
------ -------
------- -------
----------------- -----
-
--------
------
---- ------------------
---- --------------------------
------
--------
--- --------- - -------------------------------------
--- ------- - -----------------------------------
-- -------------------- - ---------------------- -
------------------- - -------
-
-- --------------------- - ----------------------- -
-------------------- - -------
-
---------
-------监听窗口尺寸变化事件进行重排
使用 JavaScript 监听窗口尺寸变化事件，当窗口尺寸变化后重新对超出父级容器尺寸的元素进行重新排布。
以下是一个使用原生 JavaScript 监听窗口尺寸变化事件进行重排的实例：
-------
---------- -
------ ------
------- ------
----------------- -----
-------- -----
------------ -------
---------------- -------
-
-------- -
------ -------
------- -------
-
--------
------
---- ------------------
---- --------------------------
------
--------
-------- -------- -
--- --------- - -------------------------------------
--- ------- - -----------------------------------
-- -------------------- - ---------------------- -
------------------- - -------
- ---- -
------------------- - ---------
-
-- --------------------- - ----------------------- -
-------------------- - -------
- ---- -
-------------------- - ---------
-
-
--------------------------------- --------
---------
---------
-------结论
使用以上任何一种方法都可以解决超宽或超高元素溢出的问题。但需要注意的是，使用 CSS 方案可能会导致内容截断，影响用户阅读体验；而使用 JavaScript 方案则需要额外的计算和时间消耗。具体选择适合的解决方案需要根据实际的情况和需求，综合考虑后做出决策。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fd1672447136260177d9e0