user6950100 user6950100 - 1 month ago 7
HTML Question

displaying list inline as text within an MVC

I have a list of items in ViewModel. For every item in the list, display as a list. Eg.

@foreach (var item in Model.Items)
{
<li><a href="link">@Html.DisplayFor(m => item.DisplayName)</a>
}


Which is displayed as:


  • Item 1

  • item 2

  • Item 3

  • Item 4



But how do I display it so that it has an "and" before the last item, and a comma after each one. Like this:

Item 1, Item 2, Item 3 and Item 4.

Answer

You can use pure CSS solution to do that

ul.cs-list li {
  list-style: none;
  display: inline-block;
}

ul.cs-list li::after {
  content: ',';
}

ul.cs-list li:last-child::after {
  content: '.';
}

ul.cs-list li:nth-last-child(2)::after {
  content: 'and';
  margin-left: 2px;
}
<ul class="cs-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Comments