在每个“！”之后插入换行符特点答案

【问题标题】：Insert line break after each "!" character在每个“！”之后插入换行符特点
【发布时间】：2015-04-01 20:31:43
【问题描述】：

是否可以使用 CSS3 在 HTML 中的特定字符后插入换行符？在这种情况下，我们需要在感叹号! 之后插入一个换行符。 This 谈到了:before 伪元素和content。这可以在感叹号后换行吗？

【问题讨论】：

我对您的具体要求有点困惑，这将有助于查看一些代码。在 CSS 中有一个 :after 元素，所以如果你想要的可以用 :before 完成，它很可能也可以用 :after 完成。 w3schools.com/cssref/sel_after.asp

标签： html css

【解决方案1】：

使用纯 CSS，不可能只找到页面上的所有感叹号。但是，如果您碰巧在其自己的元素中包含以感叹号结尾的所有内容，则可以向其添加一个包含一些 :after 伪内容的类。

.new-line:after {
  content: "";
  display: block;
}

制作:after 内容display: block 允许内容占据行的整个空间，迫使其后的元素进入下一行。 https://jsfiddle.net/5mL48tyc/

但是，将所有内容包装在 <span> 中并不是最优雅的解决方案。不确定您正在使用什么，但假设感叹号位于文本块的末尾，您可以简单地为这些块提供一个带有display: block 的容器。

【讨论】：

谢谢，@conz。这就是我的想法——不可能找到所有的! 并对每个应用一个:after。它需要一些 jQuery，在这种特殊情况下，这是不可能的。我只能访问 CSS，需要在 ! 上换行。