在列表中显示段落内容

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

链接到 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').

这将获得第二个元素而不是第一个元素。您还可以为要更改其他类名的表行指定，并将'data'替换为新类的名称。

我也看到你使用jQuery。相当于

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

链接到JSFIDDLE