I use Vuejs and have a component with div container which collapses if it's empty.
<template>
<div>{{ content }}</div>
</template>
<script>
export default {
name: "myComponent",
props: {
content: String
}
};
</script>
When consuming this component I could go for
<MyComponent content="text to show" />
but what if I want it to be empty? Then the div takes no space and collapses. I want to prevent it.
<!-- This one takes no space -->
<div></div>
<div>This one takes space</div>
I thought about passing a unicode
https://www.compart.com/de/unicode/U+2800
div {
background: red;
margin: 20px;
}
<div>⠀</div>
<div>This one takes space</div>
but the component does not convert it to a unicode character when receiving a string as a parameter.
Is there a solution using CSS instead of a unicode character?
I created a small example to show the current problem
You could add a non-breaking space (Unicode symbol U+00A0
) as the content of a pseudoelement only for :empty
divs (and an empty string as alternative text for ATs)
div:empty::before {
content: "\A0" / "";
}
div { border: 1px #ccc solid; }
<div></div>
or you could set a specific min-height
to div:empty