Форматирование текста и маркеров

Question

Я пытаюсь добавить несколько коротких строк текста маркера на веб-странице, реагирующей на html5 css3, чтобы при автоматическом разрыве строки это происходило только перед точкой маркера, например

Так вот:

---

Исполнитель

★ 1-часовое шоу ★ Золотые старики ★ Пой долго ★ Австралийский вкус

---

Становится так:

---

Исполнитель

★ 1-часовое шоу ★ Золотые старички
★ Петь долго ★ Aussie Flavor

---

не это:

---

Исполнитель

★ 1 час шоу ★ Золотые старики ★ Пойте
вместе с ★ Aussie Flavor

---

Что у меня есть:

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

Любая помощь будет высоко ценится.

Answer 1

Вы можете использовать другой метод.Пожалуйста, проверьте следующие коды:

Метод 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>

Answer 2

Вы можете сгруппировать маркеры в элементы <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>