如何在 CSS 中进行换行？
[英]How to make a line wrap in CSS?
问题描述
I'm creating a small data tooltip on my website so whenever someone hovers the word Gig the data tooltip appears.
我正在我的网站上创建一个小数据工具提示，因此每当有人将鼠标悬停在Gig一词时，数据工具提示就会出现。 I'm using ::after pseudo-element for it.我正在使用::after伪元素。
Here is my HTML:这是我的 HTML：
<a href="#" data-tool-tip="Products are called as 'Gigs' on Fiverr">Gigs</a>
Here is my CSS:这是我的 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;当我使用white-space: no-wrap; then it whole becomes one line.然后它整个变成一行。
I WANT IT TO BE IN 2 LINES.我希望它在 2 行中。
What Should I Do?我应该怎么办？
Thank You.谢谢。
3 个解决方案
解决方案1
0 已采纳 2021-07-27 09:04:26
I'm seeing just one posibility is to had a fixed width to the ::after element like this :我看到只有一种可能性是::after元素具有固定宽度，如下所示：
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我将宽度设置为 80px 为 2 行
But I don't unterstand why the white-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 )但我不明白为什么white-space: nowrap在你这边不起作用（除非你在它上面添加一个max-width大小并使用white-space: pre-wrap ，否则它将是一行）
解决方案2
0 2021-07-27 09:24:06
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; }
<a href="#" data-tool-tip="Products are called as 'Gigs' on Fiverr">Gigs</a>
解决方案3
-1 2021-07-27 09:18:35
Word Gig in one line and tool tip text in other line一行中的 Word Gig 和另一行中的工具提示文本
.tooltip { position: relative; display: inline-block; border: 1px solid black; border-radius: 8px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
<!DOCTYPE html> <html> <style> </style> <body style="text-align:center;"> <div class="tooltip">Gigs <span class="tooltiptext">Products are called as 'Gigs' on Fiverr</span> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.