使用数据内容更改css内容 - 中断行

Question

我有： HTML：

<div id="mydiv" data-content="Loading..."></div>

CSS：

#mydiv:after{
   content: attr(data-content);
   height: 100%;
   opacity: 1;
   position: absolute;
   text-align: center;
   text-transform: uppercase;
   width: 100%;
   white-space: pre;
}

JS（jQuery）：

$('.ui-effects-transfers').attr('data-content',"Loading... \A Please wait...");

我有问题，当我在CSS中设置

content: "Loading... \A Please wait...";

然后 \ A 作为破坏线工作。当我使用数据内容设置时，breake new line无效。

我如何解决这个问题？

Answer 1

您需要使用\n代替\A

$("#mydiv").attr("data-content","hello\nworld");

jsFiddle