显示div,即使是空的

Question

我使用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字符的解决方案？

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

Answer 1

您可以添加不间断空格(Unicode符号U+00A0)作为仅用于:emptydiv 的伪元素的内容

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

或者你可以设置一个特定的height直线div:empty

Codepen演示