格式化文本和项目符号

Question

我试图在html5 css3响应式网页中添加一些短线点文本，这样当自动换行发生时，它只发生在子弹点前面，例如

所以这：

---

Performer

★1小时秀★金色老歌★唱长★澳洲风味

---

变成这样：

---

Performer

★1小时秀★金色老歌 ★唱长★澳洲风味

---

不是这个：

---

Performer

★1小时秀★金色老歌★唱歌 沿着★澳洲风味

---

我所拥有的是：

<h3>Performer</h3>
<p> &#x2605;1 Hour Show  &#x2605;Golden Oldies  &#x2605;Sing along  &#x2605;Aussie Flavour </p>

任何帮助将非常感激。

Answer 1

你可以在<span>元素中对子弹进行分组，并为它们提供属性white-space: nowrap。见下面的代码：

span{
  white-space: nowrap;
}

<h3>Performer</h3>
<p> <span>&#x2605;1 Hour Show</span> <span>&#x2605;Golden Oldies</span> <span>&#x2605;Sing along</span> <span>&#x2605;Aussie Flavour</span> </p>

Answer 2

您可以使用不同的方法。请检查以下代码：

方法1

span{
  display:inline-block;
}

<h3>Performer</h3>
<p> <span>&#x2605;1 Hour Show</span> <span>&#x2605;Golden Oldies</span> <span>&#x2605;Sing along</span> <span>&#x2605;Aussie Flavour</span> </p>

方法2

span{
  float:left;
}

<h3>Performer</h3>
<p> <span>&#x2605;1 Hour Show</span> <span>&#x2605;Golden Oldies</span> <span>&#x2605;Sing along</span> <span>&#x2605;Aussie Flavour</span> </p>

方法3

span{
  white-space: nowrap;
}

<h3>Performer</h3>
<p> <span>&#x2605;1 Hour Show</span> <span>&#x2605;Golden Oldies</span> <span>&#x2605;Sing along</span> <span>&#x2605;Aussie Flavour</span> </p>