当前位置：首页 > 行业动态 > 正文

为什么DedeCMS织梦系统在鼠标移到标题处能显示完整的标题？([field:fulltitle/])？

admin
行业动态
2024-10-06
2

<!DOCTYPE html>
<html lang="zhCN">
<head>
    <meta charset="UTF8">
    <title>标题显示示例</title>
    <style>
        .titlewrapper {
            position: relative;
            overflow: hidden;
            whitespace: nowrap;
        }
        .titlewrapper span {
            position: relative;
            display: inlineblock;
            maxwidth: 100%;
            overflow: hidden;
            textoverflow: ellipsis;
            whitespace: nowrap;
        }
        .titlewrapper:hover span::after {
            content: attr(datafulltitle);
            position: absolute;
            whitespace: normal;
            backgroundcolor: #f9f9f9;
            border: 1px solid #ddd;
            padding: 5px;
            left: 0;
            top: 100%;
            zindex: 10;
        }
    </style>
</head>
<body>
<div >
    <span datafulltitle="[field:fulltitle/]">[field:title/]</span>
</div>
</body>
</html>

代码示例中，使用了HTML和CSS来实现鼠标移到标题处显示完整标题的功能。

1、<div > 包裹了需要显示标题的元素。

2、<span> 标签中，datafulltitle 属性用于存储完整的标题内容，而显示的则是截断后的标题[field:title/]。

3、使用CSS的伪元素::after 来实现鼠标移入时显示完整标题的效果。

4、当鼠标悬停在.titlewrapper 上时，span 元素中的::after 伪元素会显示，内容为datafulltitle 属性中的完整标题。

请将[field:fulltitle/] 替换为实际的内容，以显示完整的标题。