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>
Related
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;
}
My Arabic text turns into dots
ex: لعبة سوبر ماريو
Became: لعب....
I have tried to add Direction:rtl;
and Text-overflow:clip;
But the issue remains this is the current css settings
[class*="gmcn-smal"] .gm-titl{line-height: 20px;font-weight: 700;font-size: 12px;}
By the way it's working fine with English characters
Works for me:
#s2 { color: red; }
div
{
direction: rtl;
}
span
{
}
JSFIDDLE DEMO
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;
}
I have the following:
<p>This is a test</p>
<pre>public class Car {
protected Car() { }
protected Car(int speed) { }
protected void Car() { }
}</pre>
<p>Another line</p>
and
pre {
font-family: monaco,consolas,"courier new",monospace;
font-size: 1em;
min-height: 3em;
overflow: auto;
padding: 1em;
xwidth: 80%;
background-color: red;
}
When the text displays the <pre> background goes the full width of the page. I have a demo here:
fiddle
What I would like is for the red background to stop just after the far most right character of my code. I don't want to see a big red area that extends from one side of the page to another.
Can someone tell me if it is possible to do this with CSS. I really am not sure as I cannot think what I can do.
Thanks
You can use display: inline-block;:
http://jsfiddle.net/hLVV9/1/
Although please check out the browser support, because it wouldn't surprise me if IE doesn't support it.
The best solution so far :
pre {
white-space: pre-wrap;
}
You can use float:left and a clearing div to achieve this.
http://jsfiddle.net/hLVV9/2/
For that behavior you will need to float your <pre>. Floated blocks of course cause some layout changes, so you need to wrap it in another clearing block element:
<div class="pre-wrapper"><pre>Lorem ipsum</pre></div>
.pre-wrapper {
overflow: hidden;
}
.pre-wrapper pre {
float: left;
}
Adding display: inline-block should do it for FF, Safari and Chrome.
But make sure to check in all browsers and how it behaves, specially IE
One more approach:
pre {
display: table;
border-collapse: separate;
}
It allows the margins to natively collapse (in contrast to display: inline-block). As a bonus, it works with a wide range of browsers starting with IE8 or even older.