Currently, I am working on creating a Title component that accepts a text prop. This text is then split using the text.split(" ") JavaScript method to create an array of words. The component loops over this array and displays each word within the heading tag passed to it. However, when the title is rendered through the loop, there is no spacing between the words. Oddly enough, manually placing divs inside the tag adds the necessary spacing. Is this normal behavior or am I overlooking something?
The components being utilized:
<Title
Tag="h2"
text="This is an example"
/>
Here is the component code with the loop included:
---
interface Props {
Tag: string
text: string
class?: string
line?: boolean
highlight?: number[]
}
const { Tag, text, class: className, line, highlight } = Astro.props
const splitTitle = text.split(" ")
---
<Tag class:list={["c-title", className]}>
{splitTitle.map((word, index) => <div>{word}</div>)}
</Tag>
<style is:global lang="scss">
.c-title {
--title-color: var(--scheme-contrast);
color: var(--title-color);
div {
display: inline-block;
}
}
</style>
This currently renders as follows:
Thisisanexample
https://i.sstatic.net/GNway.png
On the other hand, the component without the loop looks like this:
---
interface Props {
Tag: string
text: string
class?: string
line?: boolean
highlight?: number[]
}
const { Tag, text, class: className, line, highlight } = Astro.props
const splitTitle = text.split(" ")
---
<Tag class:list={["c-title", className]}>
<div>This</div>
<div>is</div>
<div>an</div>
<div>example</div>
</Tag>
<style is:global lang="scss">
.c-title {
--title-color: var(--scheme-contrast);
color: var(--title-color);
div {
display: inline-block;
}
}
</style>
This version correctly renders as intended:
This is an example
https://i.sstatic.net/FCzsu.png
It should be noted that both methods result in the same DOM structure, so the differing behavior is perplexing.