Заменить <br> с символами / строки, используя CSS?

Question

Я ищу решение заменить разрыв строки <br>с характером, скажем, запятой.

У меня есть веб-сайт, который отображает кредиты на изображения. в альбомном режиме кредиты отображаются так:

заглавие
художник
год

в портретном режиме это должно отображаться так:

название, исполнитель, год

до сих пор я нашел это решение, работает в Safari, Safari для IOS и Chrome (не тестировал Chrome на Android, но я думаю, это должно работать тоже):

сначала установите пустой контент, чтобы удалить разрыв строки

br {content: '';}

затем установите строку, которую хотите заменить разрывом строки

br:after {content: ', ';)

если вам нужен разрыв строки, чтобы нормально работать снова поставьте

br {content:none;}

прекрасно работает на самом деле, но это правильный способ сделать это? как бы вы заменили разрыв строки на символ в css? Я ищу решение, в котором конечный пользователь CMS не должен добавлять слишком много HTML-кода при вводе кредитов.

Answer 1

Самозакрывающиеся теги (например, <br>, <img>, <input>и т. д.) не может генерировать контент. Это замененные элементы.

Для получения дополнительной информации о замененных элементах см. Эту статью: http://www.red-team-design.com/css-generated-content-replaced-elements

Answer 2

/* cross browser inline-block */
p br {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

/* replace <br> with comma */

p br {
  content: '';
  width: 9px;
  height: 18px;
}

p br:before {
  content: ', '
}

<p>some<br />text with &lt;br&gt;</p>

работает в мобильном Chrome 40.0.2214.89, Chrome 40.0.2214.95, Opera 12.16, Safari 7.0.4

не работают в Firefox 35.0.1 и Internet Explorer 11