javascript - 我可以根据换行动态隐藏 html 字符吗？

Question

我有几个连续的数据(比如姓名、地址、电话号码、电子邮件地址)，因为它们占据了网页的薄页脚。

它们由空格-破折号-空格结构分隔，如下所示(但居中):

Name - address - phone - mail address

在小屏幕上，整个页面变小并且文本换行。我已经在使用不间断空格和自动换行来确保一切就绪，但结果并不令人满意。

我得到的是:

Name - address -
  phone - mail

我想要的是:

Name - address
 phone - mail

有没有什么方法可以使用 CSS 或 JS 动态隐藏某些恰好位于行首或行尾的字符？

如果没有，请随时提出不涉及更改文本原始格式的不同解决方案。如果我找不到解决方案，我会选择:

- Name -- address -- phone -- mail -

变成:

- Name -- address -
 - phone -- mail -

或类似的东西。

Answer 1

当然有点晚了:)但我认为纯CSS解决方案可能存在。请查看下面的代码片段。

重点是列表项(除了第一个)在左边有一个负边距，在右边有相同的正边距。结果，这些边距消除了在同一行上，但提供了第二行和更多行的负缩进。以及容器的“溢出:隐藏；”隐藏左侧的额外分隔符。分隔线具有固定宽度在这里很重要。

ul {
  list-style: none;
  padding: 0;
  
  overflow: hidden;
}

li {
  display: inline;
  white-space: nowrap;
  margin-right: 0.66em;
  margin-left: -0.66em;
}

li::before {
  display: inline-block;
  content: "-";
  width: 0.66em;
}

li:first-child {
  margin-left: 0;
}

li:first-child::before {
  content: none;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
</ul>