Question

我基本上有一个容器，其中有两个块：一个块将具有动态宽度（基于其中的文本），而另一个块应具有与该动态宽度相同的宽度。如果第二个块自其内部的文本起具有较大的宽度，则必须将其中断以保持第一个块的宽度不变。

<container>
  <fixed_dynamic>
    Lorem ipsum dolor sit amet
  </fixed_dynamic>
  <samedynamic>
    few words
  </samedynamic>
</container>

我可以通过这种方式来完成某件事：https://jsfiddle.net/prxus5vm

问题是，如果我尝试写第二个宽度使div拉伸的东西，它不会破坏单词https://jsfiddle.net/prxus5vm/1/。它应该打断单词并保持第一个块的宽度。

有解决方案吗？我正在寻找CSS解决方案，希望尽可能避免使用JavaScript。

Answer 1

我在固定宽度容器中添加了width: fit-content;，现在宽度等于内容宽度，并添加了脚本，该脚本采用第一个容器的宽度并将其分配给动态容器

var fixed_width = $("fixed_dynamic").css("width");
$("samedynamic").css("width", fixed_width);
console.log(fixed_width)

container {
  display: table;
}

fixed_dynamic {
  display: block;
  width: fit-content;
  background: green;
}

samedynamic {
  display: block;
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<container>
  <fixed_dynamic>
    Lorem ipsum dolor sit amet
  </fixed_dynamic>
  <samedynamic>
    more words than fixed dynamic block
  </samedynamic>
</container>

Answer 2

如果您尝试使用table-layout属性来尽可能缩小父级，则会丢失一个小的width设置。

完成此操作后，第一个元素可以是文本或图像块。最后，white-space:nowrap可以很方便地避免文本换行并设置所需的宽度。

div {
  display: inline-table;/*NEEDED          inline for demo it is still using the table-layout */
  width: 1%;            /*NEDEED          or 0 , see it alike a min-width */
  margin:5px                          /* not needed here */
}

div * {
  padding: 0.25em ;                    /* not needed here */
  margin: 0;                           /* not needed here */
}

div h1 {
  background: green;                   /* not needed here */
  white-space: nowrap;  /* NEDEED */
  font-size:1.1rem                     /* not needed here */
}

p {

  background: yellow;                  /* not needed here */

}

<div>
  <h1>
    Lorem ipsum dolor sit amet
  </h1>
  <p>
    more words than fixed dynamic block 
  </p>
</div>

<div>
  <h1>
    A shorter text 
  </h1>
  <p>
    more words than fixed from dynamic block
  </p>
  <p>
    and a few more words
  </p>
</div>

<h1>BUT, there is a disclaimer !</h1>
<div>
  <h1>
    short
  </h1>
  <p>
    here are words that are themselves longer than the reference ....
  </p>
</div>

两个块：一个具有动态宽度，一个具有与动态宽度相同的宽度

2 个答案: