html+css处理文本溢出的两种方式

最新推荐文章于 2024-07-05 10:18:07 发布

家国MAX

最新推荐文章于 2024-07-05 10:18:07 发布

阅读量412

点赞数

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/bjiaguo/article/details/108048742

版权

第一种使用title，用户体验不好

<body>
    <div>
        <p>文本溢出怎么办</p>
        <p title="文本溢出可以设置title显示">文本溢出可以设置title显示</p>
        <p>文本溢出怎么办</p>
        <p>文本溢出怎么办</p>
        <p>文本溢出怎么办</p>
    </div>
</body>

第二种使用过渡

    <div>
        <p>文本溢出可以设置transform显示</p>
        <p>文本溢出怎么办</p>
        <p>文本溢出怎么办</p>
        <p>文本溢出怎么办</p>
        <p>文本溢出怎么办</p>
    </div>

/

<style>
div{
    height: 500px;
    width: 150px;
    background-color: #ababaa;
    overflow: hidden;
}
p{
    display: inline-block;
    white-space: nowrap;   //表示不换行
}
p:first-child{
    transition: all 2s ease 0s;  
}
p:first-child:hover{
    transform: translate(calc(-100% + 150px), 0);  //获取x轴上溢出的长度并移动
}
</style>