0

我正在寻找一种用字符替换换行符的解决方案<br> ，比如说逗号。

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

标题
艺术家
年

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

标题，艺术家，年份

到目前为止，我找到了这个解决方案，适用于 safari、safari for ios 和 chrome（尚未在 android 上测试过 chrome，但我想它也应该可以）：

先设置一个空的内容去掉换行符

br {content: '';}

然后设置要替换换行符的字符串

br:after {content: ', ';)

如果您需要换行符再次正常工作，请放

br {content:none;}

实际上效果很好，但这是正确的方法吗？你如何用css中的字符替换换行符？我正在寻找一种解决方案，在该解决方案中，cms 的最终用户在输入积分时不必添加过多的 html 代码。

4

2 回答 2

2

自闭合标签（例如<br>、<img>、<input>等）不能生成内容。这些是替换的元素。

有关替换元素的更多信息，请参阅这篇文章：http ://www.red-team-design.com/css-generated-content-replaced-elements

于 2013-07-01T18:25:13.940 回答
1 

/* 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>

works in mobile Chrome 40.0.2214.89, Chrome 40.0.2214.95, Opera 12.16, Safari 7.0.4

not work in Firefox 35.0.1 and Internet Explorer 11

于 2015-02-05T11:34:22.873 回答