如何解决使用 CSS 将数据显示为列表?
这是我的数据呈现方式:
您可以在上面看到它呈现彼此相邻的数据输入。我可以使用 CSS 将文本显示为列表吗?
我的内容查询:
query MyQuery {
allContentful {
edges {
node {
feelings
}
}
}
}
OUTPUT:
{
"data": {
"allContentful": {
"edges": [
{
"node": {
"feelings": [
"Happy / Good Mood","Creative","Sleepy / Couch Lock"
]
}
},And here is the return:
const StrainTemplate = ({
data: {
strain: {
feelings,},<p className="info-text"{feelings}</p>
解决方法
如果它在您的图像中呈现,那么您可以使用 white-space: pre;
来包含 whitespace
.info-text {
white-space: pre;
}
<p class='info-text'>
Happy / Good Mood
Creative
Sleepy / Couchy Look
</p>
注意:如果您的渲染内容有一个空格并且像 [Tab Space]
或 [New Line]
这样跟在它后面,但如果您的渲染内容只包含 {{1} } 那么它将保持在同一行
不是 CSS 解决方案,但您可以直接将其作为 li
元素吗
feeling.map(eachWord => <li>{eachWord}</li>)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。