如何防止子元素在css中扩大父元素的宽度

Posted 2023-03-06

【中文标题】如何防止子元素在css中扩大父元素的宽度

【英文标题】：how to prevent child element from widening parent element's width in css

【发布时间】：2016-08-18 13:53:31

【问题描述】：

如您所见，我有一个容器，显示为inline-block。在这个容器中，我有两个divs、#line1 和#line2。它们包含相同长度的字符。

如果我向#line1 添加更多字符，#container 和#line2 的宽度将相应增加。但这不是我所期望的。

我期望的是宽度不会改变，我可以通过水平滚动看到我刚刚添加到#line1 中的字符。

#container 
  display: inline-block;


#line1 
  background: lightblue;


#line2 
  background: orange;

<div id="container">
  <div id="line1">123</div>
  <div id="line2">123</div>
</div>

更新

如果我不想使用固定宽度，有什么方法可以达到这个效果吗？只是因为我希望他们能够响应。

【问题讨论】：

可能重复？ ***.com/questions/443700/…

【参考方案1】：

您可以在#line1上设置固定宽度并添加white-space: nowrap和overflow-x: auto

#container 
  display: inline-block;

#line1 
  background: lightblue;
  width: 70px;
  white-space: nowrap;
  overflow-x: auto;

#line2 
  background: orange;

<div id="container">
  <div id="line1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, a.</div>
  <div id="line2">123</div>
</div>

【讨论】：

如果我不想使用固定宽度，还有其他方法吗？如果它有一个固定的宽度，那么它的宽度不会随着我缩小浏览器的宽度而减小。

可以和窗口宽度jsfiddle.net/Lg0wyt9u/613或者容器宽度jsfiddle.net/Lg0wyt9u/614一样

非常感谢。你的 jsfiddles 给了我很大的帮助。

【参考方案2】：

如果您不希望元素适合其内容的大小，则应设置它们的宽度和高度。并且 overwflow: auto 属性负责对不合适的内容进行自动滚动。

#container 
  display: inline-block;
  width: 50px;


#line1 
  background: lightblue;
  width: 50px;
  height: 18px;
  word-wrap: break-word;
  overflow: auto;


#line2 
  background: orange;
  width: 50px;
  height: 18px;
  word-wrap: break-word;
  overflow: auto;

https://jsfiddle.net/x8amz1f1/

【讨论】：

此方案仅提供垂直滚动条。他想水平滚动。替换自动换行：break-word；带空格：nowrap;

【参考方案3】：

您首先需要在行框width: 50px; 上设置宽度或最大宽度。

第二件事是，您必须定义一个溢出，以便框获得滚动条。 overflow: scroll; 滚动条将始终可见，overflow: auto; 滚动条仅在内容超出框时出现。

现在您的文字会在每个单词之后中断。您需要white-space: nowrap; 以便文本不会中断。

    #container 
      display: inline-block;
    

    #line1 
      background: lightblue;
width: 50px;
overflow: scroll;
white-space: nowrap;
    

    #line2 
      background: orange;
width: 50px;
overflow: auto;
white-space: nowrap;
    

<!-- language: lang-html -->

    <div id="container">
      <div id="line1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
      <div id="line2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
    </div>

这是您的示例： https://jsfiddle.net/1Lkbttw0/

【讨论】：

应该是自动溢出而不是溢出滚动吗？否则会有一个不必要的垂直滚动条。

是的，会有一个不必要的滚动条。另一方面是溢出自动会在移动设备上引起问题。如果您关心移动设备并想使用overflow: auto;，您还应该添加-webkit-overflow-scrolling: touch; 不幸的是，没有机会只强制使用单个垂直或水平滚动条。至少没有适用于所有浏览器的简单 css 解决方法（据我所知）。

【参考方案4】：

可以在第 2 行进行更改

#line2 
    display: inline;
    background: orange;