根据不可见的鬼影内容设置div的大小

Question

如何调整<div>的大小而不是基于真实内容，而是基于未显示的鬼内容?

示例:这里的框内容"应该像它的内容"BCD":

一样大小

.container { display: flex; width: 10em; }
.item { flex-grow: 1; text-align: center; padding: 0.5rem 1rem;
border: solid black 1px; }

<div class="container">
<div class="item" data-ghost-content="BCD">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

注意:容器是flexbox.

Answer 1

这取决于你的页面是如何创建的，手动还是使用JS。但是，如果你能设法添加一个内联样式与--char-count自定义属性，你可以使用flex速记得到一个通用的解决方案:

.item { flex: var(--char-count, 1) } /* or defaults to: 1 1 0% */

不要使用flex-grow，因为flex-basis实际上需要0%

flexbox的有趣之处在于，当使用不同的flex-grow值(如flex)时，该机制将使用各种定义的flex-grow值来分配可用空间。

BTW:在CSS var(..如果需要，fallback值也可以是0，导致'unset'项目的flexxdefaultflex-grow: 0。

.container {
display: flex;
width: 10em;
}
.item {
flex: var(--char-count, 1); /* fallback 1 if 'unset' */
text-align: center;
padding: 0.5rem 1rem;
border: solid black 1px;
}

<div class="container">
<div class="item" data-ghost-content="BCD" style="--char-count: 3">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

Answer 2

是的，您可以将附加内容设置为visibility: hidden;，它将占用空间但不显示:

.container { display: flex; width: 10em; }
.item { flex-grow: 1; text-align: center; padding: 0.5rem 1rem;
border: solid black 1px; }
[data-ghost-content]:after {
content: attr(data-ghost-content);
visibility: hidden;
}

<div class="container">
<div class="item" data-ghost-content=BC>A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

在这种方法中，"幽灵内容"将不包含元素中已经存在的实际可见内容，所以它只是"BC"。

如果你想让结果居中，你可以使用&;ghost&;":before"one_answers":after" .

Answer 3

不确定是否可以稍微调整一下结构?

.container { display: flex; width: 10em; }
.item { flex-grow: 1; text-align: center; padding: 0.5rem 1rem;
border: solid black 1px; }
.ghost {
visibility: hidden;
height: 0;
}

<div class="container">
<div class="item">
<div class="item-content ghost">ABC</div>
<div class="item-content">A</div>
</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

Answer 4

如何添加.wrapper，像这样:

<div class="container">
<div class="item" data-ghost-content="BCD">
<div class="wrapper">A</div>
</div>
<div class="item">
<div class="wrapper">B</div>
</div>
<div class="item">
<div class="wrapper">C</div>
</div>
</div>

…然后，一个隐藏的伪元素包含幽灵内容。实际内容将被absolute-ly定位，以便不占用任何空间:

[data-ghost-content]::before {
content: attr(data-ghost-content);
visibility: hidden;
}
[data-ghost-content] > .wrapper {
position: absolute;
}

为了保护text-align，使.item柔性盒:

.item {
display: flex;
justify-content: center;
}

试一试:

.item {
display: flex;
justify-content: center;
}
[data-ghost-content]::before {
content: attr(data-ghost-content);
visibility: hidden;
}
[data-ghost-content] > .wrapper {
position: absolute;
}

/* Demo only */
.container {
display: flex;
width: 10em;
}
.item {
flex-grow: 1;
text-align: center;
padding: 0.5rem 1rem;
border: solid black 1px;
}

<div class="container">
<div class="item">
<div class="wrapper">E</div>
</div>
<div class="item" data-ghost-content="BCD">
<div class="wrapper">A</div>
</div>
<div class="item">
<div class="wrapper">B</div>
</div>
<div class="item">
<div class="wrapper">C</div>
</div>
</div>

Answer 5

假设您能够调整HTML，为可见内容包含<span>标记，那么我建议使用CSS网格，因为这允许元素堆叠在顶部。彼此之间，在从背景到前景的空间中，如下所示(代码中有解释性注释):

.container {
display: flex;
width: 10em;
}
.item {
flex-grow: 1;
text-align: center;
padding: 0.5rem 1rem;
border: solid black 1px;
}
/* setting up CSS grid on .item elements with the
data-ghost-content attribute: */
.item[data-ghost-content] {
display: grid;
/* placing items to the start (on the block-axis, vertical
in English) and to the center (on the inline-axis,
horizontal in English); this is in the event of a longer
"data-ghost-content" attribute being set so the visible
content is placed similarly to the neighbouring
elements/content: */
place-items: start center;
}
.item[data-ghost-content] > span {
/* placing the <span> in the first column and first row: */
grid-column: 1;
grid-row: 1;
}
/* using the ::before pseudo-element to display the
attribute-value of the data-ghost-content attribute: */
.item[data-ghost-content]::before {
content: attr(data-ghost-content);
/* placing the pseudo-element in the first row and column
of the grid, similarly to the <span> element: */
grid-column: 1;
grid-row: 1;
user-select: none;
/* hiding the element by setting its visibility to hidden,
which allows it to retain its space in the document: */
visibility: hidden;
/* positioning the pseudo-element behind the <span>: */
z-index: -1;
}

<div class="container">
<div class="item" data-ghost-content="BCD">
<span>A</span>
</div>
<div class="item">
<span>B</span>
</div>
<div class="item">
<span>C</span>
</div>
</div>

JS Fiddle demo.

引用:

• content.
• display.
• grid-column.
• grid-row.
• place-content.
• user-select.
• visibility.
• z-index.