How to make a line wrap in CSS? - html

Question

I'm creating a small data tooltip on my website so whenever someone hovers the word Gig the data tooltip appears. I'm using ::after pseudo-element for it.
Here is my HTML:
Gigs
Here is my CSS:
a[data-tool-tip] {
position: relative;
color: #ffffff;
}
a[data-tool-tip]::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: .5em;
border-radius: .5em;
bottom: 100%;
left: 0;
}
The result coming out has a lot of line breaks. It is showing as below:
Products
are
called
as Gigs
on Fiverr
When I use white-space: no-wrap; then it whole becomes one line.
I WANT IT TO BE IN 2 LINES.
What Should I Do?
Thank You.

Answer 1

I'm seeing just one posibility is to had a fixed width to the ::after element like this :
a[data-tool-tip] {
position: relative;
color: black;
}
a[data-tool-tip]:hover::after {
position: absolute;
width: 80px;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: 0.5em;
border-radius: 0.5em;
bottom: 100%;
left: 0;
}
I put the width to 80px to be on 2 lines
But I don't unterstand why thewhite-space: nowrap haven't work on your side (it will be one line with it unless you add a max-width size on it and use white-space: pre-wrap)

Answer 2

You will either have to set the width of the tooltip-elements or use a different approach.
a[data-tool-tip] {
position: relative;
top: 2em;
font-size: 200%;
}
a[data-tool-tip]:hover::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: 'Playfair Display';
padding: 1em;
font-size: .5em;
border-radius: .5em;
min-width: 10em;
bottom: 100%;
left: 0;
}
Gigs