CSS 实现字符串截取和鼠标悬浮显示效果

发布时间：2025-05-03 16:41:59

3 阅读

0 评论

文章标签： html 悬浮

<html>
<head>
<meta charset="UTF-8">
<title>用 css 实现字符串截断</title>
<style>
div {
    width: 300px;
    overflow: hidden;
    /*规定当内容溢出元素框时发生的事情*/
    white-space: nowrap;
    /*设置如何处理元素内的空白。规定在文本中不进行换行*/
    text-overflow: ellipsis;
    /*规定当文本溢出包含元素时发生的事情*/
}

div:hover{
    cursor:pointer;
}
div:hover:before{
    content:attr(title);
    background:#d9444a;
    color:#fff;
    padding:.8em 1em;
    position:absolute;
    left:100%;
    top:-70%;
    margin-left:14px;
    white-spack:pre;
}
div:hover:after{
    content:" ";
    position:absolute;
    left:80%;
    width:0;
    height:0;
    border-right:8px solid #d9444a;
    border-top:8px solid transpatrnt;
    border-bottom:8px solid transparent;
}
</style>
</head>
<body>
<div title="轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！">轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！</div>
</body>
</html>