Put Line Break on content of :after
I would like to have a line break before and after or word in the content text. I tried with word-spacing, but that did not give me the exact style I wanted. I also tried to put A, and it just shows A on the text. Is there way to achieve my goal?
Expected:
Actual:
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text="Drag your image here or Click to add" />html css
asked Nov 12 at 13:24
Eniss
180116
add a comment |
I would like to have a line break before and after or word in the content text. I tried with word-spacing, but that did not give me the exact style I wanted. I also tried to put A, and it just shows A on the text. Is there way to achieve my goal?
Expected:
Actual:
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text="Drag your image here or Click to add" />html css
asked Nov 12 at 13:24
Eniss
180116
add a comment |
I would like to have a line break before and after or word in the content text. I tried with word-spacing, but that did not give me the exact style I wanted. I also tried to put A, and it just shows A on the text. Is there way to achieve my goal?
Expected:
Actual:
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text="Drag your image here or Click to add" />html css
asked Nov 12 at 13:24
Eniss
180116
I would like to have a line break before and after or word in the content text. I tried with word-spacing, but that did not give me the exact style I wanted. I also tried to put A, and it just shows A on the text. Is there way to achieve my goal?
Expected:
Actual:
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text="Drag your image here or Click to add" />#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text="Drag your image here or Click to add" />#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text="Drag your image here or Click to add" />html css
html css
asked Nov 12 at 13:24
Eniss
180116
asked Nov 12 at 13:24
Eniss
180116
asked Nov 12 at 13:24
Eniss
180116
asked Nov 12 at 13:24
Eniss
180116
asked Nov 12 at 13:24
Eniss
180116
180116
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
I also tried to put A, and it just shows A on the text.
A would work as an escape sequence for a line break in CSS - but here your context is not CSS, you have a custom data attribute here that you are holding this piece of text in, so the primary context is HTML.
data-text="Drag your image here
or
Click to add"
is the numeric HTML entity for a line break, and I think using that one makes the most sense here.
answered Nov 12 at 13:29
misorude
1,3932312
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
add a comment |
You can achieve this like this
create text as different attributes and split them with "A" at after pseudo
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />answered Nov 12 at 13:34
Znaneswar
2,1442814
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
add a comment |
You can also use a 'hack' to do this. By using two pseudo elements and position them with the use of flex.
It's not the best solution and it involves some changes in html but it does the trick in this specific case.
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>answered Nov 12 at 13:34
Mihai T
10.8k1723
add a comment |
We can also use HTML tag as below:
<pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre>answered Nov 12 at 13:37
Suprabha
1465
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53263142%2fput-line-break-on-content-of-after%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
I also tried to put A, and it just shows A on the text.
A would work as an escape sequence for a line break in CSS - but here your context is not CSS, you have a custom data attribute here that you are holding this piece of text in, so the primary context is HTML.
data-text="Drag your image here
or
Click to add"
is the numeric HTML entity for a line break, and I think using that one makes the most sense here.
answered Nov 12 at 13:29
misorude
1,3932312
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
add a comment |
I also tried to put A, and it just shows A on the text.
A would work as an escape sequence for a line break in CSS - but here your context is not CSS, you have a custom data attribute here that you are holding this piece of text in, so the primary context is HTML.
data-text="Drag your image here
or
Click to add"
is the numeric HTML entity for a line break, and I think using that one makes the most sense here.
answered Nov 12 at 13:29
misorude
1,3932312
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
add a comment |
I also tried to put A, and it just shows A on the text.
A would work as an escape sequence for a line break in CSS - but here your context is not CSS, you have a custom data attribute here that you are holding this piece of text in, so the primary context is HTML.
data-text="Drag your image here
or
Click to add"
is the numeric HTML entity for a line break, and I think using that one makes the most sense here.
answered Nov 12 at 13:29
misorude
1,3932312
I also tried to put A, and it just shows A on the text.
A would work as an escape sequence for a line break in CSS - but here your context is not CSS, you have a custom data attribute here that you are holding this piece of text in, so the primary context is HTML.
data-text="Drag your image here
or
Click to add"
is the numeric HTML entity for a line break, and I think using that one makes the most sense here.
answered Nov 12 at 13:29
misorude
1,3932312
answered Nov 12 at 13:29
misorude
1,3932312
answered Nov 12 at 13:29
misorude
1,3932312
answered Nov 12 at 13:29
misorude
1,3932312
1,3932312
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
add a comment |
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
Thank you so much! It worked like a charm. I will set your answer as accepted in 6mins.
– Eniss
Nov 12 at 13:31
add a comment |
You can achieve this like this
create text as different attributes and split them with "A" at after pseudo
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />answered Nov 12 at 13:34
Znaneswar
2,1442814
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
add a comment |
You can achieve this like this
create text as different attributes and split them with "A" at after pseudo
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />answered Nov 12 at 13:34
Znaneswar
2,1442814
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
add a comment |
You can achieve this like this
create text as different attributes and split them with "A" at after pseudo
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />answered Nov 12 at 13:34
Znaneswar
2,1442814
You can achieve this like this
create text as different attributes and split them with "A" at after pseudo
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "A" attr(data-text2) "A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />answered Nov 12 at 13:34
Znaneswar
2,1442814
answered Nov 12 at 13:34
Znaneswar
2,1442814
answered Nov 12 at 13:34
Znaneswar
2,1442814
answered Nov 12 at 13:34
Znaneswar
2,1442814
2,1442814
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
add a comment |
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
Hehehe :) It's kinda tricky. I appreciate your different approach.
– Eniss
Nov 12 at 13:39
add a comment |
You can also use a 'hack' to do this. By using two pseudo elements and position them with the use of flex.
It's not the best solution and it involves some changes in html but it does the trick in this specific case.
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>answered Nov 12 at 13:34
Mihai T
10.8k1723
add a comment |
You can also use a 'hack' to do this. By using two pseudo elements and position them with the use of flex.
It's not the best solution and it involves some changes in html but it does the trick in this specific case.
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>answered Nov 12 at 13:34
Mihai T
10.8k1723
add a comment |
You can also use a 'hack' to do this. By using two pseudo elements and position them with the use of flex.
It's not the best solution and it involves some changes in html but it does the trick in this specific case.
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>answered Nov 12 at 13:34
Mihai T
10.8k1723
You can also use a 'hack' to do this. By using two pseudo elements and position them with the use of flex.
It's not the best solution and it involves some changes in html but it does the trick in this specific case.
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id="t" data-text1="Drag your image here " data-text2="Click to add">
<span>or</span>
</div>answered Nov 12 at 13:34
Mihai T
10.8k1723
answered Nov 12 at 13:34
Mihai T
10.8k1723
answered Nov 12 at 13:34
Mihai T
10.8k1723
answered Nov 12 at 13:34
Mihai T
10.8k1723
10.8k1723
add a comment |
add a comment |
We can also use HTML tag as below:
<pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre>answered Nov 12 at 13:37
Suprabha
1465
add a comment |
We can also use HTML tag as below:
<pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre>answered Nov 12 at 13:37
Suprabha
1465
add a comment |
We can also use HTML tag as below:
<pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre>answered Nov 12 at 13:37
Suprabha
1465
We can also use HTML tag as below:
<pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre><pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre><pre>
<div id="t" data-text="Drag your image here
or
Click to add" />
</pre>answered Nov 12 at 13:37
Suprabha
1465
answered Nov 12 at 13:37
Suprabha
1465
answered Nov 12 at 13:37
Suprabha
1465
answered Nov 12 at 13:37
Suprabha
1465
1465
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53263142%2fput-line-break-on-content-of-after%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
