CODEWITHSUNDEEP
jqueryhtmlcss
James
James

Reputation: 15

Display paragraph content in list

I want to content displaying in single line in list style. I want to display content after comma (,) in new line with the help of pure 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>

Content showing like this https://i.sstatic.net/tNrSy.png

Desired Result: https://i.sstatic.net/yR14p.png

Link to jsFiddle

Upvotes: 0

Views: 417

Answers (1)

codeherk
codeherk

Reputation: 1657

You can either:

  1. use <p> tags for each name
  2. add </br> after each name
    • can be done with HTML or JS

Option 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>

Option 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>

Option 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>

Edit

Looking at the jsfiddle you've included, You can change document.getElementsByClassName('data')[0].querySelector('p') to document.getElementsByClassName('data')[1].querySelector('p').

This will get the second element rather than the first. You can also give the table row you want to change another class name, and replace 'data' with the name of your new class.

I also see that you using jQuery. The equivalent of

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

LINK TO JSFIDDLE

Upvotes: 1

Related Questions