强制元素不水平拉伸表单元格 [英] Force element not to stretch table cell horizontally

问题描述

我有一个使用 display：table-row 和 table-cell 两个单元格：一个标签和一个输入。这两个单元格都有一个未指定的宽度，因为我想让它们与其中的内容一起拉伸。

I have a form laid out using display: table-row and table-cell, where each row contains two cells: a label and an input. Both cells have an unspecified width, because I want them to stretch along with the contents inside them.

但是，在一个特定的单元格中，我需要添加一个额外的信息。不管它有多长的信息，我不想要它伸展右手单元格。我只是想让文本换行，如果该块有一个宽度设置，但没有设置一个（因为我不知道它将是什么）

However, in a particular cell I need to add an element with extra information. No matter how long the information in it is, I don't want it to stretch the right-hand cell. I just want the text to wrap as if the block had a width set, but without setting one (because I do not know what it will have to be)

.row {
    display: table-row;
    outline: 1px solid black;
}
.cell {
    display: table-cell;
    padding: 5px;
}
.info {
    display: block;
}

<div class="row">
    <div class="cell">Label</div>
    <div class="cell input">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="cell">Another label</div>
    <div class="cell input">
        <input type="text" />
        <span class="info">This text should not make the cell larger</span>
    </div>
</div>

相对新的 width：min-content 应该能够处理这个问题，它在内联块，但是它违反了使用 table-cell 的目的，我在前面的问题 x。

I know that the relatively new width: min-content should be able to handle this, which it does on inline blocks but that defies the purpose of using table-cell, which I found out during my previous questionx. Also it's not supported by IE, which I do need.

我已经尝试将 .info 设置为 inline 和 inline-block （使用< br> 和一个伪元素 display：block ），都与结合使用word-break：break-word 但无效。

I've tried setting the .info to inline and inline-block on a new line (both using <br> and a pseudo-element with display: block), all in combination with word-break: break-word but to no avail.

奇怪的是，当我将 max-width：0 应用到 .input div 之后（使用开发人员工具），单元格将收缩以适应输入，并产生完全所需的效果。但是，事先设置此值实际上将强制为0宽度单元格，所有内容将溢出。

我真的不想诉诸使用javascript在渲染后设置这个值。有没有CSS方法来做这个？

Strangely, when I apply max-width: 0 to the .input div after the page rendered (using the developer tools) the cell will shrink to fit the input, and it produces exactly the desired effect. However, setting this value beforehand will actually force a 0 width cell and all the contents will overflow.
I really don't want to resort to having to set this value after rendering using javascript. Is there a CSS way to do this?

推荐答案

由于一些不相关的修改一个特定的不相关的列的宽度实际上 需要一个固定的宽度我偶然发现了这个修复：

As a result of some unrelated tinkering to the width of a specific unrelated column that actually did need a fixed width I stumbled upon this fix:

.input { 
    width: 1px;
}



我完全忽略了一个事实， display：table-cell ， width 属性就像一个 min-width 其他元素。因此，通过设置1像素宽度，单元格总是收缩到它需要的最小宽度。输入不能收缩，所以这是单元格所需的最小尺寸，并且 .info 元素实际上被包装以适合单元格。这完全解决了我的问题在一个简单的CSS规则。

I completely overlooked the fact that on elements with a display: table-cell, the width property acts like a min-width would on other elements. So by setting a 1 pixel width, the cell always shrinks to the minimum width it needs. Inputs can't be shrunk so that's the smallest size the cell takes, and the .info element is actually wrapped to fit inside the cell. This completely solved my problem in one simple CSS rule.

如果我想有一个 推动单元格宽度的元素，简单地设置一个宽度，或者使用 white-space：nowrap 不包含它（因此它只需要推动单元格的边界）。

If I want to have an element that does push the cell width now, I can simply set a width on it, or use white-space: nowrap to not have it wrapped (so then it simply has to push the cell boundary).

.row {
    display: table-row;
    outline: 1px solid black;
}
.cell {
    display: table-cell;
    padding: 5px;
}
.input { 
    width: 1px;
}
.info {
    display: block;
}

<div class="row">
    <div class="cell">Label</div>
    <div class="cell input">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="cell">Another label</div>
    <div class="cell input">
        <input type="text" />
        <span class="info">This text should not make the cell larger</span>
    </div>
</div>

这篇关于强制元素不水平拉伸表单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！