【问题标题】:Remove separator if line break如果换行符删除分隔符
【发布时间】:2021-10-03 00:53:27
【问题描述】:

问题

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

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>

【问题讨论】:

  • 您的 sn-p 显示了一个不同的场景,其中项目符号点和一个单词仍在第一行,而后面的单词在第二行。你是说如果必须在项目符号点位置有一个换行符,你想要换行符吗?

标签: html css word-wrap


【解决方案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>

【讨论】:

  • 等等,我试过了,但没用,而是在正文前显示半个项目符号,中间显示两个项目符号(在不同的行上)
  • 听起来很恶心!您使用的是什么浏览器和操作系统?
  • 我在 Fedora 35 上使用 Chrome 94.0。
  • 嗯,我不能让它出错,但我只有 Windows 10(Edge/Chrome 和 Firefox)。是从这里直接运行 sn-p 导致问题吗?
  • 不,它在 sn-p 上完美运行,但是当我尝试在其他地方使用它时(我将 ul 替换为 navli 替换为 a,也许这就是问题所在?) 它不能很好地工作。我使用的文字是“发生了什么事?”和“如何帮助”。我实际上已经使用 Javascript 解决了这个问题,但是如果有人给我一个纯 css 解决方案,那就更好了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-01-21
  • 1970-01-01
相关资源
最近更新 更多