Css在内容中的文本之间强制换行[重复]答案

【问题标题】：Css force new line in between text in content [duplicate]Css在内容中的文本之间强制换行[重复]
【发布时间】：2015-08-10 12:43:18
【问题描述】：

我有以下 CSS：

header h1:after {
    content:"Alumni Association";
}

我希望它显示如下：

校友

协会

我尝试过\a, \n, <br> 等，但它们都不起作用。

我正在寻找一个纯粹的 CSS 解决方案，因为这是我可以访问的全部...

【问题讨论】：

这只是找到在css内容中包含换行符的正确方法的问题。因此标记为重复。

标签： css

【解决方案1】：

您需要将white-space: pre; 添加到您的班级。

h1:after {
    content: 'Hello\AWorld';
    white-space:pre;
}

【讨论】：

【解决方案2】：

您应该在样式中添加white-space:pre;，然后在文本中包含\A：

header h1:after {
    white-space:pre;
    content:"Alumni \a Association";
}

JSFiddle

【讨论】：

【解决方案3】：

header h1:after {
    content:"Alumni \A Association";
    white-space: pre;
}

【讨论】：

【解决方案4】：

试试：DEMO

header h1:after {
    content:"Alumni \A Association"; 
  white-space: pre; /* or pre-wrap */    

}

供参考：Link

'display' 属性控制内容是否放置在块或内联框。

以下规则导致生成字符串“Chapter:” 在每个 H1 元素之前：

H1:before { content: "章节：";显示：内联； }

作者可以通过编写 “内容”之后的字符串之一中的“\A”转义序列财产。这个插入的换行符仍然受制于 “空白”属性。请参阅“字符串”和“字符和大小写” 有关“\A”转义序列的更多信息。

h1:之前{ 显示：块；文本对齐：居中；空白：pre；内容：“章节\A hoofdstuk\A chapitre”}

生成的内容不会改变文档树。特别是，它不反馈给文档语言处理器（例如，对于重新分析）。

【讨论】：

【解决方案5】：

header h1:after {
    content:"Alumni \A Association";
    white-space: pre;
}

【讨论】：