如何在 CSS 中进行换行？

Question

我正在我的网站上创建一个小数据工具提示，因此每当有人将鼠标悬停在Gig一词时，数据工具提示就会出现。 我正在使用::after伪元素。

这是我的 HTML：

<a href="#" data-tool-tip="Products are called as 'Gigs' on Fiverr">Gigs</a>

这是我的 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;
}

出来的结果有很多换行符。 它显示如下：

Products
are
called
as Gigs
on Fiverr

当我使用white-space: no-wrap; 然后它整个变成一行。

我希望它在 2 行中。

我应该怎么办？

谢谢。

Answer 1

我看到只有一种可能性是::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;
  }

我将宽度设置为 80px 为 2 行

但我不明白为什么white-space: nowrap在你这边不起作用（除非你在它上面添加一个max-width大小并使用white-space: pre-wrap ，否则它将是一行）

Answer 2

您要么必须设置工具提示元素的宽度，要么使用不同的方法。

 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>

Answer 3

一行中的 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>

如何在 CSS 中进行换行？

问题描述

3 个解决方案

解决方案1
0 已采纳 2021-07-27 09:04:26

解决方案2
0 2021-07-27 09:24:06

解决方案3
-1 2021-07-27 09:18:35

如何在 CSS 中进行换行？

问题描述

3 个解决方案

解决方案1 0 已采纳 2021-07-27 09:04:26

解决方案2 0 2021-07-27 09:24:06

解决方案3 -1 2021-07-27 09:18:35

解决方案1
0 已采纳 2021-07-27 09:04:26

解决方案2
0 2021-07-27 09:24:06

解决方案3
-1 2021-07-27 09:18:35