By default, HTML elements ignore whitespace.
You need to change that:
.break:after {
content:"\000A";
white-space: pre;
}
문제
For example:
HTML:
The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.
I want this to display:
The quick brown fox {BREAK}
jumps over the lazy dog.
I looked into the display
property, but display:inline;
doesn't break anywhere and display:block
puts breaks on both sides.
I also looked into the :after
pseudo-class, but .break:after{content:"\000A";}
ends up rendering as a space, rather than a line feed.
해결책
By default, HTML elements ignore whitespace.
You need to change that:
.break:after {
content:"\000A";
white-space: pre;
}
다른 팁
html:
The quick brown fox <span class="break"></span> jumps over the lazy dog
.
CSS:
.break{
display:block;
}
And that's all you need. display:block
may cause it to break on both sides, but it does not cause there to be an extra line. View my fiddle.