a标签实现隐藏过长信息 显示部分信息,其余部分通过.....展示 并通过a标签实现鼠标选中显示全部信息

可以通过 a 标签隐藏部分信息 以…来展示
a标签实现隐藏过长信息 显示部分信息,其余部分通过.....展示 并通过a标签实现鼠标选中显示全部信息_第1张图片

在input中选择要存入的类型,前台页面加载自动展示为 a 标签(ps:其他标签均可使用)


以下是实现该功能的样式代码

ul li a {
        display:inline-block;
        overflow:hidden;
        width: 600px;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

以下是显示样式 鼠标选中后显示全部信息
a标签实现隐藏过长信息 显示部分信息,其余部分通过.....展示 并通过a标签实现鼠标选中显示全部信息_第2张图片
代码如下:

 ul li a:hover{
        height: auto;white-space: normal;  /*选中信息后显示详细信息*/
}

你可能感兴趣的:(a标签实现隐藏过长信息 显示部分信息,其余部分通过.....展示 并通过a标签实现鼠标选中显示全部信息)