问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

单行文本超出省略号，并且提示

头像
Brad
    251829

    单行文本超出省略号,并且

    如果有超出现象，则在第二行添加提示文字
    image.png
    如果没有超出现象，则正常显示
    image.png

    如何实现？
    最好是在CSS【超出样式设置】基础上实现。

    cssreact
    阅读 2.3k
    1 个回答
    得票最新
    头像
    THIS
      7653109202
      ✓ 已被采纳

      不知道你需要的是不是这个？
      clientWidth
      scrollWidth

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    .box {
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
<body>
    <div class="box" id="box">哈哈哈哈哈哈哈或或或或或或或</div>
    <script>
        const box =  document.querySelector(".box");
        const clientWidth = box.clientWidth;
        const scrollWidth = box.scrollWidth;

        console.log(clientWidth)
        console.log(scrollWidth)

        if(clientWidth<scrollWidth){
            console.log('已省略……')
        }
    </script>
</body>
</html>
      查看全部 1 个回答
      推荐问题