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

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

如果有超出现象,则在第二行添加提示文字
单行文本超出省略号,并且提示
如果没有超出现象,则正常显示
单行文本超出省略号,并且提示

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

不知道你需要的是不是这个?
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>

回答

以上是 单行文本超出省略号,并且提示 的全部内容, 来源链接: www.h5w3.com/113378.html

回到顶部