时间戳

首页 > 解决方案 > 标签未完全显示在页面上

html - 标签未完全显示在页面上

问题描述

我用 HTML/CSS 制作的悬停 aria 标签有一个小问题。如下图所示，页面上没有完全显示标题。当句子太长时，我希望句子的其余部分显示在新行上，以便您仍然可以阅读。有人可以帮忙吗？ 在此处输入图像描述

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-label 出现在前台。

标签： htmlcss

解决方案

删除white-space:nowrap

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

推荐阅读