即使为空也显示 div答案

【问题标题】：Show div even if empty即使为空也显示 div
【发布时间】：2019-05-14 17:25:03
【问题描述】：

我使用 Vuejs 并且有一个带有 div 容器的组件，如果它是空的，它会折叠。

<template>
  <div>{{ content }}</div>
</template>

<script>
export default {
  name: "myComponent",
  props: {
    content: String
  }
};
</script>

当我使用这个组件时，我可以去

<MyComponent content="text to show" />

但如果我希望它为空怎么办？然后 div 不占用空间并折叠。我想阻止它。

<!-- This one takes no space -->
<div></div>
<div>This one takes space</div>

我想过传递一个 unicode

div {
  background: red;
  margin: 20px;
}

<div>&#10240;</div>
<div>This one takes space</div>

但组件在接收字符串作为参数时不会将其转换为 unicode 字符。

有没有使用 CSS 代替 unicode 字符的解决方案？

我创建了一个小例子来展示当前的问题

【问题讨论】：

【解决方案1】：

您可以添加一个不间断空格（Unicode 符号 U+00A0）作为伪元素的内容，仅用于 :empty divs

div:empty::before {
   content: "\A0";
}

div { border: 1px #ccc solid; }

&lt;div&gt;&lt;/div&gt;

或者您可以将特定的min-height 设置为div:empty

【讨论】：

【解决方案2】：

您可以使用 after 伪元素添加一个空格（然后它将占用字体的高度）

div {
  background: red;
  margin: 20px;
}

div:after {
  content:' ';
  display:inline-block;
}

<div></div>
<div>This one takes space</div>

或者，如果您希望您的 vue 组件显示您的 html，您可以使用

<div v-html="content"></div>

代替你的

<div>{{ content }}</div>

【讨论】：

【解决方案3】：

对 vue 不太熟悉，但也许吧？

{{ content }} 可以是{{ content || "&nbsp;&nbsp;" }}

【讨论】：

【解决方案4】：

您可以将 min-height 设置为 50px（或更小）

div {
  background: red;
  margin: 20px;

  min-height: 50px;
}

【讨论】：