Question

<h4 style="display: inline;" class="missing-docs"
    ng-repeat="d in missDocs(vm.voyage) track by $index"> {{d}}</h4>

我想在每个元素之后显示逗号（,），所以我是否必须在css中进行更改或者还有其他方法。

Answer 1

为什么不使用CSS 将逗号添加到伪元素。

h4::after {
  content: ",";
  display: inline-block;
}

h4:last-of-type::after{
    display: none; // removes comma after last h4 (not asked in the question)
}

你也可以用JavaScript做到这一点。但我猜CSS解决方案很简单。

Answer 2

假设这是可以呈现为不同<h4>标记的占位符代码，您可以使用::after pseudo-element：

＆＃13;

h4::after {
   content: ","
}
h4:last-of-type::after{
    display: none;
}

＆＃13;

<h4 style="display: inline;" class="missing-docs">One</h4>
<h4 style="display: inline;" class="missing-docs">Two</h4>
<h4 style="display: inline;" class="missing-docs">Three</h4>
<h4 style="display: inline;" class="missing-docs">Four</h4>

＆＃13;

或者只是：

＆＃13;

h4:not(:last-of-type)::after {
   content: ","
}

＆＃13;

<h4 style="display: inline;" class="missing-docs">One</h4>
<h4 style="display: inline;" class="missing-docs">Two</h4>
<h4 style="display: inline;" class="missing-docs">Three</h4>
<h4 style="display: inline;" class="missing-docs">Four</h4>

＆＃13;

Answer 3

虽然我同意@Kiran Dash而且完全同意这个解决方案 - 我或许会建议从语义的角度来看，重复h4并不完全是最好的方法（h4＆＃39; s不是标题而已一个元素列表） - 这看起来更像是一个列表，应该用ul / li来完成，但如果你想让h4包装它 - 那么你可以重复span中的元素（并消除显示）：内联问题）。

然后只需删除：last-of-type中的逗号，你在h4中有一系列重复的跨度 - 而不是一系列重复的h4＆＃39。那就是说 - 我仍然会把它作为一个列表并重复内容并将它们显示为内联......：）

<h4 
  <span  class="missing-docs" ng-repeat="d in missDocs(vm.voyage) track by $index"> {{d}}</span>
</h4>

//css
h4 span::after {
  content: ", ";
}

h4 span:last-of-type::after {
  content: "";
}

或

  <ul class="missing-docs">
    <li ng-repeat="d in missDocs(vm.voyage) track by $index"> {{d}} </li>
  </ul>

  //css
  .missing-docs li {
    display:inline
  }

  .missing-docs li::after {
    content: ",";
  }

  .missing-docs li:last-of-type::after {
    content: "";
  }

Answer 4

您可以使用CSS ::after选择器。

h4::after {
  content: ",";
}

您也可以使用jQuery .after()函数。

$("h4").after(",");

使用<h4>标记在每个元素后显示逗号（，）

4 个答案: