标签未完全显示在页面上

Question

我用HTML / CSS制作的悬停咏叹调标签有一个小问题。如下图所示，页面上没有完全显示标题。当句子太长时，我希望其余的句子显示在新行中，以便您仍可以阅读。有人可以帮忙吗？

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
    content: attr(aria-label);
    font-size: 13px;
    padding: 6px 8px;
    position: absolute;
    font-weight: normal;
    left: 20px;
    top: 100%;
    white-space: nowrap;
    color: #000;
    border: 1px solid #00adf6;
    background: #FFF;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat diam nec ullamcorper dapibus. Sed nunc odio, accumsan id pellentesque in, interdum quis metus."><i class="fa fa-info info-btn"></i></span>

添加width或max-width无效。

第一个问题现在已经解决。但是现在我有以下问题：

其他文字正在检查中。我希望将aria标签放在前台。

Answer 1

删除white-space:nowrap

这意味着您不允许句子换行。 默认值为white-space:normal

Answer 2

您需要删除

空白：nowrap；

添加display:block以使其正确显示，或者如果div则可以使用span标签

span:hover {
    position: relative;
    display: block; /*added*/

}

span[aria-label]:hover:after {
    content: attr(aria-label);
    font-size: 13px;
    padding: 6px 8px;
    position: absolute;
    font-weight: normal;
    left: 20px;
    top: 100%;
    color: #000;
    border: 1px solid #00adf6;
    background: #FFF; 
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span  aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat diam nec ullamcorper dapibus. Sed nunc odio, accumsan id pellentesque in, interdum quis metus."><i class="fa fa-info info-btn"></i></span>

Answer 3

在span[aria-label]:hover:after下

删除white-space:nowrap或将其更改为white-space:normal

Answer 4

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
    content: attr(aria-label);
    font-size: 13px;
    padding: 6px 8px;
    position: absolute;
    font-weight: normal;
    left: 20px;
    top: 0; /* new **/
    min-width: 200px;  /* new **/
    color: #000;
    border: 1px solid #00adf6;
    background: #FFF;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat diam nec ullamcorper dapibus. Sed nunc odio, accumsan id pellentesque in, interdum quis metus."><i class="fa fa-info info-btn"></i></span>