如果换行符删除分隔符

Question

问题

当出现换行符时，如何删除项目符号 •？例如，

abc • defg

有要点，而

abc
defg

没有？ 以下是正在发生的事情：

<textarea readonly cols="50" rows="5">big fat long line &bull; longer line haha whoopsie</textarea>
<textarea readonly cols="20" rows="5">big fat long line &bull; longer line haha whoopsie</textarea>

Answer 1

虽然您将项目符号显示为文本的一部分以在 CSS 中实现这一点，但您仍需要一些文本结构。尤其是这样系统就知道不要在任何方便的词之后就在项目符号处打断。

这个 sn-p 将文本形成一个无序列表，其中每个列表项设置为一个内联块，但在此类项目之前的“正常”项目符号点使用 before 伪元素恢复。每行的第一个项目符号被 ul 元素上的 before 伪元素覆盖。

在整页中尝试 sn-p，然后逐渐减小窗口大小。

ul {
  position: relative;
  box-sizing: border-box;
  padding: 0;
}

ul:before {
  content: '\00a0 \2022 \000a0 ';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  background: white;
  color: transparent;
  z-index: 1;
}

li {
  display: inline-block;
}

li:before {
  content: '\00a0 \2022 \000a0 ';
  display: inline-block;
}

<ul>
  <li>Some text</li>
  <li>Some text of a different length</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>