Question

我有以下CSS：

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

我希望它显示如下：

校友

协会

我尝试了\a, \n, <br>等，但没有一个能够正常工作。

我正在寻找一个纯粹的CSS解决方案，因为我只能访问...

Answer 1

您需要在课堂上添加+。

white-space: pre;

Answer 2

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

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

JSFiddle

Answer 3

尝试： DEMO

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

}

供参考： Link

＆＃39;显示＆＃39;属性控制内容是否放置在   阻止或内联框。

以下规则会导致字符串＆＃34; Chapter：＆＃34;要生成   在每个H1元素之前：

H1：在{content：＆＃34; Chapter：＆＃34 ;;显示：内联; }

作者可以通过编写内容在生成的内容中包含换行符   ＆＃34; \ A＆＃34;在＆＃39;内容＆＃39;之后的一个字符串中的转义序列   属性。这个插入的换行符仍然受制于   ＆＃39;空白＆＃39;属性。请参阅＆＃34; Strings＆＃34;和＆＃34;字符和案例＆＃34;对于   有关＆＃34; \ A＆＃34;的更多信息逃逸序列。

h1：在{之前       显示：块;       text-align：center;       白空间：pre;       内容：＆＃34;章节\ A hoofdstuk \ A chapitre＆＃34; }

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

Answer 4

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

Answer 5

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

Css强制内容中的文本之间的新行

5 个答案: