This question already has answers here:
Newline character sequence in CSS 'content' property? [duplicate]
(2 answers)
Closed 7 years ago.
I have the following CSS:
header h1:after {
content:"Alumni Association";
}
and I want it to display as follows:
Alumni
Association
I have tried \a, \n, <br> etc but none of them work.
I am looking for a purely CSS solution as that is all I have access to...
You need to add white-space: pre; to your class.
h1:after {
content: 'Hello\AWorld';
white-space:pre;
}
You should add white-space:pre; to the styling, and then include \A in the text:
header h1:after {
white-space:pre;
content:"Alumni \a Association";
}
JSFiddle
header h1:after {
content:"Alumni \A Association";
white-space: pre;
}
Try: DEMO
header h1:after {
content:"Alumni \A Association";
white-space: pre; /* or pre-wrap */
}
For reference: Link
The 'display' property controls whether the content is placed in a
block or inline box.
The following rule causes the string "Chapter: " to be generated
before each H1 element:
H1:before { content: "Chapter: "; display: inline; }
Authors may include newlines in the generated content by writing the
"\A" escape sequence in one of the strings after the 'content'
property. This inserted line break is still subject to the
'white-space' property. See "Strings" and "Characters and case" for
more information on the "\A" escape sequence.
h1:before {
display: block;
text-align: center;
white-space: pre;
content: "chapter\A hoofdstuk\A chapitre" }
Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).
header h1:after {
content:"Alumni \A Association";
white-space: pre;
}
Related
I have two elements: tooltip and tooltip-line.
There is common properties for each elements:
[tooltip]::after, [tooltip-line]::after {
position: absolute;
opacity: 0;
visibility: hidden;
/* Other common properties */
}
Next, I have different properties for each element.
[tooltip-line]::after { /* One line tooltip */
content: attr(tooltip-line);
white-space: nowrap;
}
[tooltip]::after { /* Multiline tooltip */
content: attr(tooltip);
width: 200px;
white-space: normal;
}
Is this a correct usage? Including similar classes. Or should I copy all properties to each declaration block?
Here's a different approach which might be slightly more scalable. Using CSS custom variables, we can override any default class values by resetting them in the multiline class. Finally, I would make the attributes containing the tooltip content identical—and valid data attributes—if possible.
.tooltip::after {
--tooltip-white-space: nowrap;
content: attr(data-tooltip-content);
white-space: var(--tooltip-white-space);
}
.tooltip.multiline::after {
--tooltip-white-space: normal;
}
.container {
width: 250px;
border: 1px solid red;
}
<div class="container">
<div class="tooltip" data-tooltip-content="my tooltip content should not wrap no matter what"></div>
<div class="tooltip multiline" data-tooltip-content="my multliline tooltip content should wrap"></div>
</div>
jsFiddle
It's absolutely right to divide the css in multiple blocks.
One of the first thing to know while writing code in any language is NOT to repeat yourself.
I'm trying to customize a web page for the company I work for. they give the option o use custom css to edit. They don't give the HTML, if you ask how to edit something they will provide the specific code. they provided the below code, and I'm trying to figure out how to insert a line break in the first text string. any ideas?
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed h1:after {
content: 'THANK YOU FOR APPLYING. WE WILL GET BACK TO YOU SHORTLY.';
float: left;
text-indent: 0;
width: 100%;
}
.landing .confirmation-container .application-confirmed p {
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed p:after {
content: 'If you did not receive a reply email within 48 hours, please check your spam or email us: hiring#example.com';
float: left;
text-indent: 0;
width: 100%;
}
To insert a new line / line break in that content, use the \A escape characters. In order for the new lines to work properly, you also need to set the white-space property to either pre or pre-wrap.
content: "THANK YOU FOR APPLYING. \AWE WILL GET BACK TO YOU SHORTLY.";
white-space: pre-wrap;
The \A escape sequence will insert a line break. It works the same as adding a < br /> tag to your HTML.
content: 'THANK YOU FOR APPLYING.\A WE WILL GET BACK TO YOU SHORTLY.';
You can use content:"\a" and white-space: pre to create a line break without adding a <br/> tag to your HTML
It works like this:
.landing .confirmation-container .application-confirmed h1 {
display:inline;
}
.landing .confirmation-container .application-confirmed h1:before {
content:"\a";
white-space: pre;
}
Example:
h1 {
display:inline;
}
h1:before {
content:"\a";
white-space: pre;
}
<h1>Header</h1>
\a means line break (character U+000A)
white-space: pre tells browsers to treat it as a line break in rendering.
I have an element
<div class="Test_then">The result is ...</div>
The Test_then class looks like this:
.Test_then::before {
content: 'Then';
}
My goal is to have the (The result is ...) appear below the Then content added by the Test_then class. So in other words in would render like this:
Then
The result is ...
If your generated content simply consists of the word "Then" inline, you can just add a newline with \a, and use white-space: pre-wrap (or pre) to cause the newline to render as an actual line break:
.Test_then::before {
content: 'Then\a';
white-space: pre-wrap;
}
An example of this is also provided in the spec.
If your generated content needs to be displayed as a block for any reason, then it becomes even simpler — display: block alone will have the same effect:
.Test_then::before {
content: 'Then';
display: block;
}
I want to do a line break with CSS. I´m using content.
td:before {
content: "Test\A Test2";
}
It´s not working.
How to do it correctly?
You must add white-space:pre;
Example
.linebreak:after{
content:"A" '\A' "B";
white-space: pre;
}
<div class="linebreak"></div>
Anonymous replaced elements are content used with :before or :after
See https://developer.mozilla.org/en-US/docs/CSS/content
Here is an example:
.valid:after {
content: '<';
color: green;
}
.invalid:after {
content: '>';
color: red;
}
The problem is HTML entities are not replaced by their caracters and I still see their code.
CSS isn't HTML. Simply use
.valid:after {
content: '<';
color: green;
}
In case of need, you may also escape your characters using the unicode hexa.
For example for ▶ :
.valid:after {
content: '\25B6';
color: green;
}
But you don't need to escape < nor >, even if you embed your CSS in the <style> element of an HTML file.
Just in case (it might be less disturbing to your HTML editor), their codes would be \003C and \003E.