格式化文本和项目符号点

Question

我正在尝试在html5 css3响应式网页中添加一些短的项目符号点文本，以便在自动换行符发生时仅发生在项目符号点的前面，例如

所以这个：

---

表演者

★1小时表演★金色老歌★唱很长时间★澳洲风味

---

成为这个：

---

表演者

★1小时表演★金唱片
★唱很长的音乐★澳洲风味

---

不是这个：

---

表演者

★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>