我想创建一个布局,其中两个元素位于同一行。我正面临这些要求
- 元素必须保持在同一行,永远不要换到第二行
- 元素的长度取决于数据和用户输入(加载页面后是静态的,但事先不知道)
- 当窗口调整大小时,可用宽度可能会改变
这是我对 inline-block
元素的了解:
.container {
white-space: nowrap;
width: 33%;
background-color: yellow;
overflow: hidden;
}
.button {
display: inline-block;
border: 1px solid green;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container">
<div class="button">Button</div>
<div class="button">Rather long button text lorem ipsum dolor sit amet</div>
</div>
这基本上切断了第二个元素。理想情况下,它会缩小尺寸,看起来像这样,就好像它有一个 max-width
但是宽度可能会改变。有什么想法可以实现吗?
最佳答案
我不清楚你的要求,但到目前为止我所了解的是解决方案,如果你需要其他东西,请告诉我。
.container {
white-space: nowrap;
display: flex;
overflow: hidden;
}
.button {
display: inline-block;
border: 1px solid green;
overflow: hidden;
text-overflow: ellipsis;
background-color: yellow;
}
<div class="container">
<div class="button">Button Button Button Button Button</div>
<div class="button">Rather long button text lorem ipsum dolor sit amet button text lorem ipsum dolor sit amet butto button text lorem ipsum dolor sit ametn text lt</div>
</div>
关于html - 如何创建一个与其父级一起收缩的内联 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57803605/