Question

我正在寻找替换换行符的解决方案<br> 有一个角色，让我们说一个逗号。

我有一个显示图像信用的网站。在横向模式中，积分显示如下：

标题
艺术家
年份

在纵向模式下，它应该显示如下：

标题，艺术家，年份

到目前为止，我发现这个解决方案，适用于safari，ios和chrome的safari（还没有在android上测试过Chrome，但我想它应该也能正常工作）：

首先设置一个空内容以删除换行符

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中不起作用

用css替换<br/>用字符/字符串？

2 个答案: