This question already has answers here:
Add line break to ::after or ::before pseudo-element content
(8 answers)
Closed 7 years ago.
I want to add text to a div by using css code (and not directly in the html page). I want to add a sentence in a div (class = title) but I want to jump a line in this sentence at some point.
My css is:
.title
{
visibility: hidden;
}
.title: after
{
content: "Part 1 Part 2";
visibility: visible;
margin-left: -220px;
}
I would like to jump a line between Part 1 and Part 2.
I thought maybe it worked by using something like \n or \a but it didn't work.
Thank you,
Best Regards
Use white-space: pre-wrap;
Check out this fiddle.
Here is the snippet.
.title {
visibility: hidden;
}
.title:after {
content: "Part 1 \A Part 2";
visibility: visible;
white-space: pre-wrap;
}
<div class="title"></div>
Related
This question already has answers here:
How to turn off word wrapping in HTML?
(6 answers)
Closed 2 years ago.
Codepen
I'm trying to avoid word-breaks, in my .threadTitle, by using display: inline-block. This works, however when adding a hyphen inbetween two letters will it will cause a break anyways.
Neither word-break: keep-all nor display: inline-block has the desired effect.
.threadTitle {
position: relative;
display: inline-block;
word-break: keep-all;
flex: 1 1 0;
overflow: hidden;
}
This is mostly a Unicode problem, not an HTML one. You need to use non-breaking hyphens (‑, U+2011) instead of a normal hyphens:
<p>This-is-a-really-long-sentence-separated-by-breaking-hyphens-that-will-be-split-among-various-lines.</p>
<p>This‑is‑a‑really‑long‑sentence‑separated‑by‑non‑breaking‑hyphens‑that‑won't‑be‑split‑among‑various‑lines.</p>
This is useful for making sure hyphenated words are never broken between two lines.
If you don't want wrapping at all, use white-space: nowrap;, as Ori Drori's answer suggests.
p {
white-space: nowrap;
}
<p>This is a really long sentence separated by breaking (normal) spaces that won't be split among various lines because <code>white-space: nowrap;</code> is being used.</p>
use white-space: nowrap; to prevent text wrapping:
.threadTitle {
position: relative;
display: inline-block;
white-space: nowrap;
flex: 1 1 0;
overflow: hidden;
}
<h1 class="threadTitle">Thread-Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</h1>
This question already has answers here:
How can I do text-overflow: ellipsis on two lines?
(5 answers)
Closed 6 years ago.
In the jsfiddle link you can find what I tried out, however when the text goes over two lines, I do not see the ellipsis anymore. Can somebody help me out. Im new to CSS, and what to solve this problem using CSS/SASS only.
.exciting-text {
display: block;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 2em;
line-height: 1em;
}
.exciting-text::after {
content: "...";
color: red;
}
<p class="exciting-text">Contributing to MDN is easy and fun.Just hit the edit button to add new live samples, or improve existing samplesdfsfssfddcdxcxdsdzxfsfdsadasdaddsadsadsadsadsadasdasfds.</p>
In current example your problem is max-height. Get rid of it and your pseudo ellipsis will be visible at all times.
I'm editing a WordPress site at present. I've been researching this a bit but I can't work out why this isn't working.
The problem is I'm confined to the bounds of CSS editing only. I cannot touch the HTML. Thus I am hoping to edit content via CSS. (I realize this is abnormal).
So far I can across this suggested solution. It did however, not work for me.
Does anyone know a cool trick to edit content via CSS and not HTML, PHP, JavaScript etc...
Suggested code below not working
.comment-reply-title {
display:none !important;
}
.comment-reply-title::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial;
}
You can use visibility:hidden in div then apply overflow:visible to ::after
font-size:0 is to hide/collapse the extra space left by div
.comment-reply-title {
visibility: hidden;
font-size: 0
}
.comment-reply-title::after {
content: "New text";
visibility: visible;
font-size: 16px
}
<div class="comment-reply-title">Old Text</div>
This question already has an answer here:
Hide title from tooltip
(1 answer)
Closed 7 years ago.
I found out how to add a good hover tip within CSS classes referenced in HTML here
I used a combination of the "title" HTML and lharby's CSS.
I have this CSS:
span:hover {
position:relative;
cursor:pointer;
}
span[title]:hover:after {
content: attr(title);
background:yellow;
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
}
...and my HTML is like so:
<p> . . . I couldn't stood it much longer. Then for an hour it was deadly dull, and I was fidgety. Miss Watson would say,
<span class="watson" title="Miss Watson is speaking">"Don't put your feet up there, Huckleberry;"</span> and <span
class="watson" title="Miss Watson is speaking">"Don't scrunch up
like that, Huckleberry set up straight;"</span> and pretty soon she would say, <span class="watson" title="Miss
Watson is speaking">"Don't gap and stretch like that, Huckleberry why don't you try to
behave?"</span> ...</p>
But I get two hover tips with this:
I would like to only have one; how can I 86 the smaller white one?
Title auto-gens the little white one by default so to not activate it I'd use data-attr instead of title since you are creating your own.
span[data-attr]:hover:after {
content: attr(data-attr);
}
This question already has an answer here:
Hide title from tooltip
(1 answer)
Closed 8 years ago.
I use CSS to style the abbr tool tip:
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
width: 300px;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: #ffffe1;
content: attr(title);
}
<abbr title="As Soon As Possible">ASAP</abbr>
However, the original old-fashioned abbr tooltip is displayed too, in addition to the styled new one. How can I suppress it?
This cannot be simply solved with the answer to a similar question. The attribute name title must be kept and replaced at run-time with a javascript.
Since you can't prevent/hide the title attribute from showing on hover, just use a different attribute. A data-* attribute such as data-title would work. Just change the markup and the content value.
Example Here
<abbr data-title="As Soon As Possible">ASAP</abbr>
abbr:hover::after {
content: attr(data-title);
/* .. */
}
As for the rounded corners, just use the border-radius property.