1.0.2 • Published 2 years ago
@huangzhiping/check-ellipsis v1.0.2
下载安装：
# 使用 npm 命令下载安装
$ npm i @huangzhiping/check-ellipsis
# 使用 yarn 命令下载安装
$ yarn add @huangzhiping/check-ellipsis使用实例：
checkEllipsis(el, line) row: dom 元素 line: 文本支持的最大行数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>js 判断文字是否有省略号</title>
<style>
.first-row {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sec-row {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 设置最大显示行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="first-row">
我是只有一行的文本，宽度只有300，大家来看看我是否有省略号
</div>
<div class="firstRowAnswer"></div>
<div class="sec-row">
我是只有两行的文本，宽度只有300，大家来看看我是否有省略号
</div>
<div class="secRowAnswer"></div>
<script src="./main.umd.js"></script>
<script type="module">
const row1 = document.querySelector(".first-row");
const firstRowEllipsis = checkEllipsis(row1, 1) ? "有" : "无";
document.getElementsByClassName("firstRowAnswer")[0].innerHTML =
"是否有省略号：" + firstRowEllipsis;
const row2 = document.querySelector(".sec-row");
const secRowEllipsis = checkEllipsis(row2, 2) ? "有" : "无";
document.getElementsByClassName("secRowAnswer")[0].innerHTML =
"是否有省略号：" + secRowEllipsis;
</script>
</body>
</html>