如何防止 DIV 的宽度扩大？

Question

如何防止 div 扩展宽度？

我想 .dont-expand 假装 width: 100%; 的意思是“100%，但不包括我自己”。基本上，计算 width: 100%;（忽略自身），并以像素 width: Npx; 为单位设置宽度 - 在 CSS 而不是 JS.

.outer {
  position: absolute;
  border: 1px solid black;
}

/* This element sets the width of the container */
.has-width {
  width: 300px;
  margin-top: 10px;
  background: rgba(0,128,0,.2);
  border-right: 2px solid green;
  color: #888;
}

.dont-expand {
  /* width: ??? */
  
  /* This would be nice       */
  /* expand: false;           */
  
  /* Or this                  */
  /* width: toPx(100%);       */
  
  /* Or this                  */
  /* width: calc(100% + 0px); */
}

  <div class="outer">
    <div class="dont-expand">
      How do I get this text to wrap
      instead of growing the container?
    </div>
    <div class="has-width">
      I should be setting the width of "container".
    </div>
  </div>

jsbin link

Answer 1

将 box-sizing 属性设置为 "border-box"

.dont-expand {
  /* width: ?? */

  /* This would be nice       */
  /* expand: false;           */

  /* Or this                  */
  /* width: toPx(100%);       */

  /* Or this                  */
  /* width: calc(100% + 0px); */


  box-sizing: border-box;
}

Answer 2

尝试使用

.outer {
  position: absolute;
  border: 1px solid black;
  width: min-content;
}

这应该使外框的宽度尽可能小，同时不会挤压内容。

Answer 3

您可以依靠 table-layout 属性将容器缩小到最小内容的宽度。

然后您需要通过 max-content

将宽度 .has-content 设置为其实际内容的宽度

.dont-expand不需要宽度，它会在可用的宽度内包裹，除非本身有比.has-width宽的文字或图片，即我所知道的唯一副作用。

示例：

.outer {
  position: absolute;
  border: 1px solid black;
  display: table;
  width: 0;
}


/* This element sets the width of the container */

.has-width {
  width: max-content;
  margin-top: 10px;
  background: rgba(0, 128, 0, .2);
  border-right: 2px solid green;
  color: #888;
}

.dont-expand {
  /* nothing needed here */
}
.bis {bottom:0}

<div class="outer">
  <div class="dont-expand">
    How do I get this text to wrap instead of growing the container?
  </div>
  <div class="has-width">
    I should be setting the width of "container".
  </div>
</div>

<div class="outer bis ">
  <div class="dont-expand">
    How do I get this text to wrap instead of growing the container?
  </div>
  <div class="has-width">
   i'm container's width ! 
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.

这里，只有 1 列，因为 .outer 的 children 没有 display 重置。这个想法是只在主包装器上使用table-layout display 算法的shrink/expand原生属性，不重建一个视觉 HTML table 来自 div.

玩这个 table-layout 行为来熟悉它，不要考虑任何 HTML table 标签，它只是关于 CSS 样式 ;)

Answer 4

看起来您可以将元素 "appear" 设置为其父元素的宽度为 0，但仍然可以通过执行以下操作使其扩展到父元素的宽度：width: 0px; min-width: 100%.

这似乎是最干净、与浏览器最兼容的解决方案。它也不需要更改 display 属性，这是一个优点。

 /* Make it "shrink-to-fit", either inline-block, or position: absolute */
 .outer {
    /* position: absolute; */
    display: inline-block;
    border: 1px solid black;
  }

  /* This element sets the width of the container */
  .has-width {
    width: 300px;
    margin-top: 10px;
    background: rgba(0,128,0,.2);
    border-right: 2px solid green;
    color: #888;
  }

  /* Appears as 0 width to parent, but then expands to fit. */
  .dont-expand {
    width: 0px;
    min-width: 100%;
  }

<div class="outer">
  <div class="dont-expand">
    How do I get this text to wrap
    instead of growing the container?
  </div>
  <div class="has-width">
    I should be setting the width of "container".
  </div>
</div>

如何防止 DIV 的宽度扩大？

How to prevent a DIV from expanding in width?

html

css

width