鼠标移动出现小手与溢出部分以省略号显示

最新推荐文章于 2024-05-12 14:23:18 发布

喜欢白朴

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量733

点赞数 3

分类专栏： css vue 文章标签：前端

本文链接：https://blog.csdn.net/m0_62351100/article/details/124100304

版权

vue 同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

1、鼠标移动显示小手

只需要在需要的标签内添加 `cursor: pointer` 这个属性就行了

2、以省略号显示

首先，我们需要给标签定宽

<style>
    p{
        width: 63px; // 定宽
        overflow: hidden; // 溢出部分隐藏
        white-space:nowrap; // 有些标签会自动换行，这个是禁止自动换行
        text-overflow:ellipsis; // 使溢出部分以省略号显示，这个省略号是会占用你设置的固定宽度的
    }
</style>
<body>
    <p>溢出部分以省略号显示</p>
</body>

喜欢白朴

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动出现小手与溢出部分以省略号显示

1、鼠标移动显示小手只需要在需要的标签内添加 `cursor: pointer` 这个属性就行了2、以省略号显示首先，我们需要给标签定宽<style> p{ width: 63px; // 定宽 overflow: hidden; // 溢出部分隐藏 white-space:nowrap; // 有些标签会自动换行，这个是禁止自动换行 text-overflow:ellipsis; // 使溢出部分以省略号显示，
复制链接

扫一扫