如何将 CMS 集合中的名称显示为单个段落，以逗号分隔

【问题标题】：How to display names in a CMS collection as a single paragraph, comma seperated如何将 CMS 集合中的名称显示为单个段落，以逗号分隔
【发布时间】：2022-01-09 07:25:59
【问题描述】：

我有一个客户列表，我想在一个段落中显示，请看图片。我不确定如何在 HTML + CSS 中进行设置。

[示例 iamge1

【问题讨论】：

标签： html css content-management-system

【解决方案1】：

这里是示例，请注意使用 innerHTML 并不总是好的。

const el = document.getElementById('list')
const list = ['a', 'b', 'c', 'd', 'e']
el.innerHTML = list.join(', ')

.header {
  font-size: 20px;
}

<p class='header'>Clients</p>
<p id='list' />

【讨论】：

【解决方案2】：

这是一个如何实现的示例：

.frame {
  color: white;
  background-color: black;
  font-family: sans-serif;
  margin: 1rem auto;
  padding: 1rem;
  width: 70%;
}

.frame > h1 {
  margin: 0;
}

<div class="frame">
  <h1>Clients</h1>
  <p>
    One, Two, Three, Four, Five, Six, Seven, Eight, Nine, Ten, Eleven, Twelve, Thirteen, Fourteen, Fifteen, Sixteen, Seventeen, Eighteen, Nineteen, Twenty
  </p>
</div>

【讨论】：