html - 在每个 "!"字符后插入换行符

Question

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

Answer 1

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

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

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

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