在列表中显示段落内容

Question

我希望内容以列表样式显示在单行中。我想借助纯CSS在换行符（，）之后显示内容。

.datatype {
  color: #3e3a3a;
  font-size: 15px;
}

<div class="datatype">
  <p>Hello Noah, Hello Noah, Hello Liam, Hello Mason, Hello Jacob, Hello William, Hello Ethan, Hello James, Hello Elijah</p>
</div>

内容显示为https://i.stack.imgur.com/tNrSy.png

期望的结果：https://i.stack.imgur.com/yR14p.png

Link to jsFiddle

Answer 1

您可以：

1. 为每个名称使用<p>标记
在每个名称后
2. 添加</br>
   • 可以使用 HTML 或 JS

选项1

.datatype{
    color: #3e3a3a;
    font-size: 15px;
}

<div class="datatype">
  <p>Hello Noah,</p>
  <p>Hello Noah,</p> 
  <p>Hello Liam,</p>
  <p>Hello Mason,</p> 
  <p>Hello Jacob,</p> 
  <p>Hello William,</p> 
  <p>Hello Ethan,</p> 
  <p>Hello James,</p> 
  <p>Hello Elijah</p>
 </div>

选项2（HTML）

.datatype{
    color: #3e3a3a;
    font-size: 15px;
}

<div class="datatype">
  <p id="names">Hello Noah,</br> Hello Noah,</br> Hello Liam,</br> Hello Mason,</br> Hello Jacob,</br> Hello William,</br> Hello Ethan,</br> Hello James,</br> Hello Elijah</p>
 </div>

选项2（JS）

//let list = document.getElementById('names');
let list = document.getElementsByClassName('datatype')[0].querySelector('p');

//console.log(list);
console.log(list.innerHTML);

let arr = list.innerHTML.split(',').map((name) => name.trim() + ',</br>');
console.log(arr);
console.log(arr.join(''));
list.innerHTML = arr.join('');

.datatype{
    color: #3e3a3a;
    font-size: 15px;
}

<div class="datatype">
  <p id="names">Hello Noah, Hello Noah, Hello Liam, Hello Mason, Hello Jacob, Hello William, Hello Ethan, Hello James, Hello Elijah</p>
 </div>

---

编辑

查看您包含的jsfiddle，可以更改document.getElementsByClassName('data')[0].querySelector('p') 到document.getElementsByClassName('data')[1].querySelector('p')。

这将获得第二个元素，而不是第一个。 您还可以给表行添加另一个 class 名称，并将'data'替换为新类的名称。

我还看到您使用 jQuery 。相当于

document.getElementsByClassName('data')[1].querySelector('p')是$('.data p')[1]

LINK TO JSFIDDLE