时间戳

首页 > 解决方案 > 如果换行符删除分隔符

html - 如果换行符删除分隔符

问题描述

问题

•有换行符时如何删除项目符号？例如，

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>

标签： htmlcssword-wrap

解决方案

尽管您将项目符号显示为文本的一部分以在 CSS 中实现这一点，但您将需要一些文本结构。特别是，系统知道在任何方便的词之后不按要点打断。

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

在整页中尝试片段，然后逐渐减小窗口大小。

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>

推荐阅读