smart-text-ellipsis 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 wurencaideli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+## Introduction
+
+[DEMO](https://wurencaideli.github.io/smart-text-ellipsis/demo.html)
+
+#### install
+
+```javascript
+npm install smart-text-ellipsis
+```
+
+#### How to use
+
+```javascript
+
+```

package/dist/simple-text-ellipsis.cjs.js

@@ -0,0 +1,116 @@
+/*!
+ * smart-text-ellipsis v0.0.2
+ * Copyright 2025 wuzhanggui https://github.com/wurencaideli
+ * Licensed under MIT
+ */
+'use strict';
+function e(e) {
+    e && e.parentNode && e.parentNode.removeChild(e);
+}
+function t(e, t) {
+    e.classList.add(t);
+}
+function s(e, t) {
+    e.classList.remove(t);
+}
+exports.SmartTextEllipsis = class {
+    isDestroyed = !1;
+    maxLines = 0;
+    targetEl = void 0;
+    expandEl = void 0;
+    collapseEl = void 0;
+    placeholderEl = void 0;
+    isOpen = !1;
+    #e = 0;
+    constructor(e = {}) {
+        const s = e.targetEl,
+            i = e.isOpen,
+            l = e.maxLines,
+            n = document.createElement('span'),
+            p = document.createElement('div'),
+            h = document.createElement('div');
+        (n.innerText = e.expandElText || 'Expand'),
+            (p.innerText = e.collapseElText || 'Collapse'),
+            (n.onclick = () => {
+                this.#t();
+            }),
+            (p.onclick = () => {
+                this.#s();
+            }),
+            t(p, 'smart-text-ellipsis-collapse'),
+            t(n, 'smart-text-ellipsis-expand'),
+            t(h, 'smart-text-ellipsis-placeholder'),
+            s.prepend(n),
+            s.prepend(h),
+            s.appendChild(p),
+            (this.targetEl = s),
+            (this.isOpen = i),
+            (this.maxLines = l),
+            (this.expandEl = n),
+            (this.collapseEl = p),
+            (this.placeholderEl = h),
+            this.update();
+    }
+    destroy() {
+        (this.isOpen = !0),
+            e(this.expandEl),
+            e(this.collapseEl),
+            this.#i(),
+            (this.targetEl = void 0),
+            (this.expandEl = void 0),
+            (this.collapseEl = void 0),
+            (this.isDestroyed = !0);
+    }
+    update() {
+        this.isDestroyed || ((this.#e = this.#l()), this.#i(), this.#n(), this.#p());
+    }
+    #t() {
+        this.isDestroyed || ((this.isOpen = !0), this.update());
+    }
+    #s() {
+        this.isDestroyed || ((this.isOpen = !1), this.update());
+    }
+    #i() {
+        const e = this.targetEl;
+        e &&
+            (this.isDestroyed
+                ? e.style.setProperty('--max-lines', void 0)
+                : e.style.setProperty('--max-lines', `${this.maxLines}`),
+            1 == this.maxLines
+                ? (t(e, 'smart-text-ellipsis-one'), s(e, 'smart-text-ellipsis-more'))
+                : (t(e, 'smart-text-ellipsis-more'), s(e, 'smart-text-ellipsis-one')),
+            this.isOpen && (s(e, 'smart-text-ellipsis-more'), s(e, 'smart-text-ellipsis-one')),
+            s(e, 'is-ellipsis'),
+            s(e, 'is-exceeded-max-line'));
+    }
+    #p() {
+        if (this.isDestroyed) return;
+        const e = this.targetEl;
+        e &&
+            (this.isOpen
+                ? this.#h() > this.maxLines && t(e, 'is-exceeded-max-line')
+                : this.#a() && t(e, 'is-ellipsis'));
+    }
+    #n() {
+        const e = this.#e,
+            t = this.placeholderEl,
+            s = this.targetEl;
+        t.style.height = s.clientHeight - e + 'px';
+    }
+    #l() {
+        const e = this.targetEl;
+        if (e) return parseFloat(getComputedStyle(e).lineHeight) || 24;
+    }
+    #a() {
+        const e = this.maxLines,
+            t = this.targetEl;
+        return 1 === e ? t.scrollWidth > t.clientWidth : t.scrollHeight > t.clientHeight;
+    }
+    #h() {
+        const e = this.targetEl,
+            t = this.collapseEl,
+            s = this.#e;
+        return Math.floor((e.clientHeight - t.clientHeight) / s);
+    }
+};
+//# sourceMappingURL=smart-text-ellipsis.cjs.js.map

package/dist/simple-text-ellipsis.cjs.js.map

@@ -0,0 +1,68 @@
+{
+    "version": 3,
+    "file": "smart-text-ellipsis.cjs.js",
+    "sources": [
+        "../src/common.js",
+        "../src/index.js"
+    ],
+    "sourcesContent": [
+        "export function removeElement(element) {\n    if (element && element.parentNode) {\n        element.parentNode.removeChild(element);\n    }\n}\nexport function addElementClass(el, className) {\n    el.classList.add(className);\n}\nexport function removeElementClass(el, className) {\n    el.classList.remove(className);\n}\n",
+        "import { addElementClass, removeElement, removeElementClass } from './common';\nexport class SmartTextEllipsis {\n    isDestroyed = false;\n    maxLines = 0;\n    targetEl = undefined;\n    expandEl = undefined;\n    collapseEl = undefined;\n    placeholderEl = undefined;\n    isOpen = false;\n    #lineHeight = 0;\n    constructor(options = {}) {\n        const targetEl = options.targetEl;\n        const isOpen = options.isOpen;\n        const maxLines = options.maxLines;\n        const expandEl = document.createElement('span');\n        const collapseEl = document.createElement('div');\n        const placeholderEl = document.createElement('div');\n        expandEl.innerText = options.expandElText || 'Expand';\n        collapseEl.innerText = options.collapseElText || 'Collapse';\n        expandEl.onclick = () => {\n            this.#handleExpand();\n        };\n        collapseEl.onclick = () => {\n            this.#handleCollapse();\n        };\n        addElementClass(collapseEl, 'smart-text-ellipsis-collapse');\n        addElementClass(expandEl, 'smart-text-ellipsis-expand');\n        addElementClass(placeholderEl, 'smart-text-ellipsis-placeholder');\n        targetEl.prepend(expandEl);\n        targetEl.prepend(placeholderEl);\n        targetEl.appendChild(collapseEl);\n        this.targetEl = targetEl;\n        this.isOpen = isOpen;\n        this.maxLines = maxLines;\n        this.expandEl = expandEl;\n        this.collapseEl = collapseEl;\n        this.placeholderEl = placeholderEl;\n        this.update();\n    }\n    /** 销毁实例 */\n    destroy() {\n        this.isOpen = true;\n        removeElement(this.expandEl);\n        removeElement(this.collapseEl);\n        this.#setupClass();\n        this.targetEl = undefined;\n        this.expandEl = undefined;\n        this.collapseEl = undefined;\n        this.isDestroyed = true;\n    }\n    /** 更新样式 */\n    update() {\n        if (this.isDestroyed) return;\n        this.#lineHeight = this.#getLineHeight();\n        this.#setupClass();\n        this.#setupPlaceholderStyle();\n        this.#setupBtClass();\n    }\n    #handleExpand() {\n        if (this.isDestroyed) return;\n        this.isOpen = true;\n        this.update();\n    }\n    #handleCollapse() {\n        if (this.isDestroyed) return;\n        this.isOpen = false;\n        this.update();\n    }\n    /** 设置容器的类名 */\n    #setupClass() {\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        if (!this.isDestroyed) {\n            targetEl.style.setProperty('--max-lines', `${this.maxLines}`);\n        } else {\n            targetEl.style.setProperty('--max-lines', undefined);\n        }\n        if (this.maxLines == 1) {\n            addElementClass(targetEl, 'smart-text-ellipsis-one');\n            removeElementClass(targetEl, 'smart-text-ellipsis-more');\n        } else {\n            addElementClass(targetEl, 'smart-text-ellipsis-more');\n            removeElementClass(targetEl, 'smart-text-ellipsis-one');\n        }\n        if (this.isOpen) {\n            removeElementClass(targetEl, 'smart-text-ellipsis-more');\n            removeElementClass(targetEl, 'smart-text-ellipsis-one');\n        }\n        removeElementClass(targetEl, 'is-ellipsis');\n        removeElementClass(targetEl, 'is-exceeded-max-line');\n    }\n    /** 设置按钮的类名 */\n    #setupBtClass() {\n        if (this.isDestroyed) return;\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        if (this.isOpen) {\n            // 如果行数超过了，显示收缩按钮\n            if (this.#getActualLines() > this.maxLines) {\n                addElementClass(targetEl, 'is-exceeded-max-line');\n            }\n        } else {\n            // 如果字体省略了，显示展开按钮\n            if (this.#isEllipsisActive()) {\n                addElementClass(targetEl, 'is-ellipsis');\n            }\n        }\n    }\n    /** 设置占位元素的样式 */\n    #setupPlaceholderStyle() {\n        const lineHeight = this.#lineHeight;\n        const placeholderEl = this.placeholderEl;\n        const targetEl = this.targetEl;\n        placeholderEl.style.height = `${targetEl.clientHeight - lineHeight}px`;\n    }\n    /** 获取一行文本的高度 */\n    #getLineHeight() {\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        return parseFloat(getComputedStyle(targetEl).lineHeight) || 24;\n    }\n    /** 判断是否省略了 */\n    #isEllipsisActive() {\n        const maxLines = this.maxLines;\n        const el = this.targetEl;\n        if (maxLines === 1) {\n            return el.scrollWidth > el.clientWidth;\n        }\n        return el.scrollHeight > el.clientHeight;\n    }\n    /** 获取文本视觉上的行数 */\n    #getActualLines() {\n        const targetEl = this.targetEl;\n        const collapseEl = this.collapseEl;\n        const lh = this.#lineHeight;\n        return Math.floor((targetEl.clientHeight - collapseEl.clientHeight) / lh);\n    }\n}\n"
+    ],
+    "names": [
+        "removeElement",
+        "element",
+        "parentNode",
+        "removeChild",
+        "addElementClass",
+        "el",
+        "className",
+        "classList",
+        "add",
+        "removeElementClass",
+        "remove",
+        "isDestroyed",
+        "maxLines",
+        "targetEl",
+        "undefined",
+        "expandEl",
+        "collapseEl",
+        "placeholderEl",
+        "isOpen",
+        "lineHeight",
+        "constructor",
+        "options",
+        "document",
+        "createElement",
+        "innerText",
+        "expandElText",
+        "collapseElText",
+        "onclick",
+        "this",
+        "handleExpand",
+        "handleCollapse",
+        "prepend",
+        "appendChild",
+        "update",
+        "destroy",
+        "setupClass",
+        "getLineHeight",
+        "setupPlaceholderStyle",
+        "setupBtClass",
+        "style",
+        "setProperty",
+        "getActualLines",
+        "isEllipsisActive",
+        "height",
+        "clientHeight",
+        "parseFloat",
+        "getComputedStyle",
+        "scrollWidth",
+        "clientWidth",
+        "scrollHeight",
+        "lh",
+        "Math",
+        "floor"
+    ],
+    "mappings": "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"
+}

package/dist/simple-text-ellipsis.css

@@ -0,0 +1,63 @@
+.smart-text-ellipsis-more {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--max-lines);
+    -webkit-box-orient: vertical;
+    display: -moz-box;
+    line-clamp: var(--max-lines);
+    box-orient: vertical;
+    overflow: hidden;
+}
+.smart-text-ellipsis-one {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.is-ellipsis > .smart-text-ellipsis-expand {
+    display: inline;
+    display: initial;
+}
+.is-ellipsis > .smart-text-ellipsis-placeholder {
+    display: inline;
+    display: initial;
+}
+.is-exceeded-max-line > .smart-text-ellipsis-collapse {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.smart-text-ellipsis-expand {
+    display: none;
+    float: right;
+    clear: both;
+    cursor: pointer;
+    color: #1178d9;
+    position: relative;
+    z-index: 2;
+}
+.smart-text-ellipsis-collapse {
+    display: none;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+    -moz-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    cursor: pointer;
+    color: #1178d9;
+    position: relative;
+    z-index: 2;
+}
+.smart-text-ellipsis-placeholder {
+    display: none;
+    float: right;
+    width: 0;
+    pointer-events: none;
+}

package/dist/simple-text-ellipsis.esm.js

@@ -0,0 +1,116 @@
+/*!
+ * smart-text-ellipsis v0.0.2
+ * Copyright 2025 wuzhanggui https://github.com/wurencaideli
+ * Licensed under MIT
+ */
+function e(e) {
+    e && e.parentNode && e.parentNode.removeChild(e);
+}
+function t(e, t) {
+    e.classList.add(t);
+}
+function s(e, t) {
+    e.classList.remove(t);
+}
+class i {
+    isDestroyed = !1;
+    maxLines = 0;
+    targetEl = void 0;
+    expandEl = void 0;
+    collapseEl = void 0;
+    placeholderEl = void 0;
+    isOpen = !1;
+    #e = 0;
+    constructor(e = {}) {
+        const s = e.targetEl,
+            i = e.isOpen,
+            l = e.maxLines,
+            n = document.createElement('span'),
+            p = document.createElement('div'),
+            h = document.createElement('div');
+        (n.innerText = e.expandElText || 'Expand'),
+            (p.innerText = e.collapseElText || 'Collapse'),
+            (n.onclick = () => {
+                this.#t();
+            }),
+            (p.onclick = () => {
+                this.#s();
+            }),
+            t(p, 'smart-text-ellipsis-collapse'),
+            t(n, 'smart-text-ellipsis-expand'),
+            t(h, 'smart-text-ellipsis-placeholder'),
+            s.prepend(n),
+            s.prepend(h),
+            s.appendChild(p),
+            (this.targetEl = s),
+            (this.isOpen = i),
+            (this.maxLines = l),
+            (this.expandEl = n),
+            (this.collapseEl = p),
+            (this.placeholderEl = h),
+            this.update();
+    }
+    destroy() {
+        (this.isOpen = !0),
+            e(this.expandEl),
+            e(this.collapseEl),
+            this.#i(),
+            (this.targetEl = void 0),
+            (this.expandEl = void 0),
+            (this.collapseEl = void 0),
+            (this.isDestroyed = !0);
+    }
+    update() {
+        this.isDestroyed || ((this.#e = this.#l()), this.#i(), this.#n(), this.#p());
+    }
+    #t() {
+        this.isDestroyed || ((this.isOpen = !0), this.update());
+    }
+    #s() {
+        this.isDestroyed || ((this.isOpen = !1), this.update());
+    }
+    #i() {
+        const e = this.targetEl;
+        e &&
+            (this.isDestroyed
+                ? e.style.setProperty('--max-lines', void 0)
+                : e.style.setProperty('--max-lines', `${this.maxLines}`),
+            1 == this.maxLines
+                ? (t(e, 'smart-text-ellipsis-one'), s(e, 'smart-text-ellipsis-more'))
+                : (t(e, 'smart-text-ellipsis-more'), s(e, 'smart-text-ellipsis-one')),
+            this.isOpen && (s(e, 'smart-text-ellipsis-more'), s(e, 'smart-text-ellipsis-one')),
+            s(e, 'is-ellipsis'),
+            s(e, 'is-exceeded-max-line'));
+    }
+    #p() {
+        if (this.isDestroyed) return;
+        const e = this.targetEl;
+        e &&
+            (this.isOpen
+                ? this.#h() > this.maxLines && t(e, 'is-exceeded-max-line')
+                : this.#a() && t(e, 'is-ellipsis'));
+    }
+    #n() {
+        const e = this.#e,
+            t = this.placeholderEl,
+            s = this.targetEl;
+        t.style.height = s.clientHeight - e + 'px';
+    }
+    #l() {
+        const e = this.targetEl;
+        if (e) return parseFloat(getComputedStyle(e).lineHeight) || 24;
+    }
+    #a() {
+        const e = this.maxLines,
+            t = this.targetEl;
+        return 1 === e ? t.scrollWidth > t.clientWidth : t.scrollHeight > t.clientHeight;
+    }
+    #h() {
+        const e = this.targetEl,
+            t = this.collapseEl,
+            s = this.#e;
+        return Math.floor((e.clientHeight - t.clientHeight) / s);
+    }
+}
+export { i as SmartTextEllipsis };
+//# sourceMappingURL=smart-text-ellipsis.esm.js.map

package/dist/simple-text-ellipsis.esm.js.map

@@ -0,0 +1,69 @@
+{
+    "version": 3,
+    "file": "smart-text-ellipsis.esm.js",
+    "sources": [
+        "../src/common.js",
+        "../src/index.js"
+    ],
+    "sourcesContent": [
+        "export function removeElement(element) {\n    if (element && element.parentNode) {\n        element.parentNode.removeChild(element);\n    }\n}\nexport function addElementClass(el, className) {\n    el.classList.add(className);\n}\nexport function removeElementClass(el, className) {\n    el.classList.remove(className);\n}\n",
+        "import { addElementClass, removeElement, removeElementClass } from './common';\nexport class SmartTextEllipsis {\n    isDestroyed = false;\n    maxLines = 0;\n    targetEl = undefined;\n    expandEl = undefined;\n    collapseEl = undefined;\n    placeholderEl = undefined;\n    isOpen = false;\n    #lineHeight = 0;\n    constructor(options = {}) {\n        const targetEl = options.targetEl;\n        const isOpen = options.isOpen;\n        const maxLines = options.maxLines;\n        const expandEl = document.createElement('span');\n        const collapseEl = document.createElement('div');\n        const placeholderEl = document.createElement('div');\n        expandEl.innerText = options.expandElText || 'Expand';\n        collapseEl.innerText = options.collapseElText || 'Collapse';\n        expandEl.onclick = () => {\n            this.#handleExpand();\n        };\n        collapseEl.onclick = () => {\n            this.#handleCollapse();\n        };\n        addElementClass(collapseEl, 'smart-text-ellipsis-collapse');\n        addElementClass(expandEl, 'smart-text-ellipsis-expand');\n        addElementClass(placeholderEl, 'smart-text-ellipsis-placeholder');\n        targetEl.prepend(expandEl);\n        targetEl.prepend(placeholderEl);\n        targetEl.appendChild(collapseEl);\n        this.targetEl = targetEl;\n        this.isOpen = isOpen;\n        this.maxLines = maxLines;\n        this.expandEl = expandEl;\n        this.collapseEl = collapseEl;\n        this.placeholderEl = placeholderEl;\n        this.update();\n    }\n    /** 销毁实例 */\n    destroy() {\n        this.isOpen = true;\n        removeElement(this.expandEl);\n        removeElement(this.collapseEl);\n        this.#setupClass();\n        this.targetEl = undefined;\n        this.expandEl = undefined;\n        this.collapseEl = undefined;\n        this.isDestroyed = true;\n    }\n    /** 更新样式 */\n    update() {\n        if (this.isDestroyed) return;\n        this.#lineHeight = this.#getLineHeight();\n        this.#setupClass();\n        this.#setupPlaceholderStyle();\n        this.#setupBtClass();\n    }\n    #handleExpand() {\n        if (this.isDestroyed) return;\n        this.isOpen = true;\n        this.update();\n    }\n    #handleCollapse() {\n        if (this.isDestroyed) return;\n        this.isOpen = false;\n        this.update();\n    }\n    /** 设置容器的类名 */\n    #setupClass() {\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        if (!this.isDestroyed) {\n            targetEl.style.setProperty('--max-lines', `${this.maxLines}`);\n        } else {\n            targetEl.style.setProperty('--max-lines', undefined);\n        }\n        if (this.maxLines == 1) {\n            addElementClass(targetEl, 'smart-text-ellipsis-one');\n            removeElementClass(targetEl, 'smart-text-ellipsis-more');\n        } else {\n            addElementClass(targetEl, 'smart-text-ellipsis-more');\n            removeElementClass(targetEl, 'smart-text-ellipsis-one');\n        }\n        if (this.isOpen) {\n            removeElementClass(targetEl, 'smart-text-ellipsis-more');\n            removeElementClass(targetEl, 'smart-text-ellipsis-one');\n        }\n        removeElementClass(targetEl, 'is-ellipsis');\n        removeElementClass(targetEl, 'is-exceeded-max-line');\n    }\n    /** 设置按钮的类名 */\n    #setupBtClass() {\n        if (this.isDestroyed) return;\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        if (this.isOpen) {\n            // 如果行数超过了，显示收缩按钮\n            if (this.#getActualLines() > this.maxLines) {\n                addElementClass(targetEl, 'is-exceeded-max-line');\n            }\n        } else {\n            // 如果字体省略了，显示展开按钮\n            if (this.#isEllipsisActive()) {\n                addElementClass(targetEl, 'is-ellipsis');\n            }\n        }\n    }\n    /** 设置占位元素的样式 */\n    #setupPlaceholderStyle() {\n        const lineHeight = this.#lineHeight;\n        const placeholderEl = this.placeholderEl;\n        const targetEl = this.targetEl;\n        placeholderEl.style.height = `${targetEl.clientHeight - lineHeight}px`;\n    }\n    /** 获取一行文本的高度 */\n    #getLineHeight() {\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        return parseFloat(getComputedStyle(targetEl).lineHeight) || 24;\n    }\n    /** 判断是否省略了 */\n    #isEllipsisActive() {\n        const maxLines = this.maxLines;\n        const el = this.targetEl;\n        if (maxLines === 1) {\n            return el.scrollWidth > el.clientWidth;\n        }\n        return el.scrollHeight > el.clientHeight;\n    }\n    /** 获取文本视觉上的行数 */\n    #getActualLines() {\n        const targetEl = this.targetEl;\n        const collapseEl = this.collapseEl;\n        const lh = this.#lineHeight;\n        return Math.floor((targetEl.clientHeight - collapseEl.clientHeight) / lh);\n    }\n}\n"
+    ],
+    "names": [
+        "removeElement",
+        "element",
+        "parentNode",
+        "removeChild",
+        "addElementClass",
+        "el",
+        "className",
+        "classList",
+        "add",
+        "removeElementClass",
+        "remove",
+        "SmartTextEllipsis",
+        "isDestroyed",
+        "maxLines",
+        "targetEl",
+        "undefined",
+        "expandEl",
+        "collapseEl",
+        "placeholderEl",
+        "isOpen",
+        "lineHeight",
+        "constructor",
+        "options",
+        "document",
+        "createElement",
+        "innerText",
+        "expandElText",
+        "collapseElText",
+        "onclick",
+        "this",
+        "handleExpand",
+        "handleCollapse",
+        "prepend",
+        "appendChild",
+        "update",
+        "destroy",
+        "setupClass",
+        "getLineHeight",
+        "setupPlaceholderStyle",
+        "setupBtClass",
+        "style",
+        "setProperty",
+        "getActualLines",
+        "isEllipsisActive",
+        "height",
+        "clientHeight",
+        "parseFloat",
+        "getComputedStyle",
+        "scrollWidth",
+        "clientWidth",
+        "scrollHeight",
+        "lh",
+        "Math",
+        "floor"
+    ],
+    "mappings": "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"
+}

package/dist/simple-text-ellipsis.umd.js

@@ -0,0 +1,128 @@
+/*!
+ * smart-text-ellipsis v0.0.2
+ * Copyright 2025 wuzhanggui https://github.com/wurencaideli
+ * Licensed under MIT
+ */
+!(function (e, t) {
+    'object' == typeof exports && 'undefined' != typeof module
+        ? t(exports)
+        : 'function' == typeof define && define.amd
+        ? define(['exports'], t)
+        : t(
+              ((e = 'undefined' != typeof globalThis ? globalThis : e || self)[
+                  'smart-text-ellipsis'
+              ] = {}),
+          );
+})(this, function (e) {
+    'use strict';
+    function t(e) {
+        e && e.parentNode && e.parentNode.removeChild(e);
+    }
+    function s(e, t) {
+        e.classList.add(t);
+    }
+    function i(e, t) {
+        e.classList.remove(t);
+    }
+    e.SmartTextEllipsis = class {
+        isDestroyed = !1;
+        maxLines = 0;
+        targetEl = void 0;
+        expandEl = void 0;
+        collapseEl = void 0;
+        placeholderEl = void 0;
+        isOpen = !1;
+        #e = 0;
+        constructor(e = {}) {
+            const t = e.targetEl,
+                i = e.isOpen,
+                l = e.maxLines,
+                n = document.createElement('span'),
+                p = document.createElement('div'),
+                h = document.createElement('div');
+            (n.innerText = e.expandElText || 'Expand'),
+                (p.innerText = e.collapseElText || 'Collapse'),
+                (n.onclick = () => {
+                    this.#t();
+                }),
+                (p.onclick = () => {
+                    this.#s();
+                }),
+                s(p, 'smart-text-ellipsis-collapse'),
+                s(n, 'smart-text-ellipsis-expand'),
+                s(h, 'smart-text-ellipsis-placeholder'),
+                t.prepend(n),
+                t.prepend(h),
+                t.appendChild(p),
+                (this.targetEl = t),
+                (this.isOpen = i),
+                (this.maxLines = l),
+                (this.expandEl = n),
+                (this.collapseEl = p),
+                (this.placeholderEl = h),
+                this.update();
+        }
+        destroy() {
+            (this.isOpen = !0),
+                t(this.expandEl),
+                t(this.collapseEl),
+                this.#i(),
+                (this.targetEl = void 0),
+                (this.expandEl = void 0),
+                (this.collapseEl = void 0),
+                (this.isDestroyed = !0);
+        }
+        update() {
+            this.isDestroyed || ((this.#e = this.#l()), this.#i(), this.#n(), this.#p());
+        }
+        #t() {
+            this.isDestroyed || ((this.isOpen = !0), this.update());
+        }
+        #s() {
+            this.isDestroyed || ((this.isOpen = !1), this.update());
+        }
+        #i() {
+            const e = this.targetEl;
+            e &&
+                (this.isDestroyed
+                    ? e.style.setProperty('--max-lines', void 0)
+                    : e.style.setProperty('--max-lines', `${this.maxLines}`),
+                1 == this.maxLines
+                    ? (s(e, 'smart-text-ellipsis-one'), i(e, 'smart-text-ellipsis-more'))
+                    : (s(e, 'smart-text-ellipsis-more'), i(e, 'smart-text-ellipsis-one')),
+                this.isOpen && (i(e, 'smart-text-ellipsis-more'), i(e, 'smart-text-ellipsis-one')),
+                i(e, 'is-ellipsis'),
+                i(e, 'is-exceeded-max-line'));
+        }
+        #p() {
+            if (this.isDestroyed) return;
+            const e = this.targetEl;
+            e &&
+                (this.isOpen
+                    ? this.#h() > this.maxLines && s(e, 'is-exceeded-max-line')
+                    : this.#o() && s(e, 'is-ellipsis'));
+        }
+        #n() {
+            const e = this.#e,
+                t = this.placeholderEl,
+                s = this.targetEl;
+            t.style.height = s.clientHeight - e + 'px';
+        }
+        #l() {
+            const e = this.targetEl;
+            if (e) return parseFloat(getComputedStyle(e).lineHeight) || 24;
+        }
+        #o() {
+            const e = this.maxLines,
+                t = this.targetEl;
+            return 1 === e ? t.scrollWidth > t.clientWidth : t.scrollHeight > t.clientHeight;
+        }
+        #h() {
+            const e = this.targetEl,
+                t = this.collapseEl,
+                s = this.#e;
+            return Math.floor((e.clientHeight - t.clientHeight) / s);
+        }
+    };
+});
+//# sourceMappingURL=smart-text-ellipsis.umd.js.map

package/dist/simple-text-ellipsis.umd.js.map

@@ -0,0 +1,68 @@
+{
+    "version": 3,
+    "file": "smart-text-ellipsis.umd.js",
+    "sources": [
+        "../src/common.js",
+        "../src/index.js"
+    ],
+    "sourcesContent": [
+        "export function removeElement(element) {\n    if (element && element.parentNode) {\n        element.parentNode.removeChild(element);\n    }\n}\nexport function addElementClass(el, className) {\n    el.classList.add(className);\n}\nexport function removeElementClass(el, className) {\n    el.classList.remove(className);\n}\n",
+        "import { addElementClass, removeElement, removeElementClass } from './common';\nexport class SmartTextEllipsis {\n    isDestroyed = false;\n    maxLines = 0;\n    targetEl = undefined;\n    expandEl = undefined;\n    collapseEl = undefined;\n    placeholderEl = undefined;\n    isOpen = false;\n    #lineHeight = 0;\n    constructor(options = {}) {\n        const targetEl = options.targetEl;\n        const isOpen = options.isOpen;\n        const maxLines = options.maxLines;\n        const expandEl = document.createElement('span');\n        const collapseEl = document.createElement('div');\n        const placeholderEl = document.createElement('div');\n        expandEl.innerText = options.expandElText || 'Expand';\n        collapseEl.innerText = options.collapseElText || 'Collapse';\n        expandEl.onclick = () => {\n            this.#handleExpand();\n        };\n        collapseEl.onclick = () => {\n            this.#handleCollapse();\n        };\n        addElementClass(collapseEl, 'smart-text-ellipsis-collapse');\n        addElementClass(expandEl, 'smart-text-ellipsis-expand');\n        addElementClass(placeholderEl, 'smart-text-ellipsis-placeholder');\n        targetEl.prepend(expandEl);\n        targetEl.prepend(placeholderEl);\n        targetEl.appendChild(collapseEl);\n        this.targetEl = targetEl;\n        this.isOpen = isOpen;\n        this.maxLines = maxLines;\n        this.expandEl = expandEl;\n        this.collapseEl = collapseEl;\n        this.placeholderEl = placeholderEl;\n        this.update();\n    }\n    /** 销毁实例 */\n    destroy() {\n        this.isOpen = true;\n        removeElement(this.expandEl);\n        removeElement(this.collapseEl);\n        this.#setupClass();\n        this.targetEl = undefined;\n        this.expandEl = undefined;\n        this.collapseEl = undefined;\n        this.isDestroyed = true;\n    }\n    /** 更新样式 */\n    update() {\n        if (this.isDestroyed) return;\n        this.#lineHeight = this.#getLineHeight();\n        this.#setupClass();\n        this.#setupPlaceholderStyle();\n        this.#setupBtClass();\n    }\n    #handleExpand() {\n        if (this.isDestroyed) return;\n        this.isOpen = true;\n        this.update();\n    }\n    #handleCollapse() {\n        if (this.isDestroyed) return;\n        this.isOpen = false;\n        this.update();\n    }\n    /** 设置容器的类名 */\n    #setupClass() {\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        if (!this.isDestroyed) {\n            targetEl.style.setProperty('--max-lines', `${this.maxLines}`);\n        } else {\n            targetEl.style.setProperty('--max-lines', undefined);\n        }\n        if (this.maxLines == 1) {\n            addElementClass(targetEl, 'smart-text-ellipsis-one');\n            removeElementClass(targetEl, 'smart-text-ellipsis-more');\n        } else {\n            addElementClass(targetEl, 'smart-text-ellipsis-more');\n            removeElementClass(targetEl, 'smart-text-ellipsis-one');\n        }\n        if (this.isOpen) {\n            removeElementClass(targetEl, 'smart-text-ellipsis-more');\n            removeElementClass(targetEl, 'smart-text-ellipsis-one');\n        }\n        removeElementClass(targetEl, 'is-ellipsis');\n        removeElementClass(targetEl, 'is-exceeded-max-line');\n    }\n    /** 设置按钮的类名 */\n    #setupBtClass() {\n        if (this.isDestroyed) return;\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        if (this.isOpen) {\n            // 如果行数超过了，显示收缩按钮\n            if (this.#getActualLines() > this.maxLines) {\n                addElementClass(targetEl, 'is-exceeded-max-line');\n            }\n        } else {\n            // 如果字体省略了，显示展开按钮\n            if (this.#isEllipsisActive()) {\n                addElementClass(targetEl, 'is-ellipsis');\n            }\n        }\n    }\n    /** 设置占位元素的样式 */\n    #setupPlaceholderStyle() {\n        const lineHeight = this.#lineHeight;\n        const placeholderEl = this.placeholderEl;\n        const targetEl = this.targetEl;\n        placeholderEl.style.height = `${targetEl.clientHeight - lineHeight}px`;\n    }\n    /** 获取一行文本的高度 */\n    #getLineHeight() {\n        const targetEl = this.targetEl;\n        if (!targetEl) return;\n        return parseFloat(getComputedStyle(targetEl).lineHeight) || 24;\n    }\n    /** 判断是否省略了 */\n    #isEllipsisActive() {\n        const maxLines = this.maxLines;\n        const el = this.targetEl;\n        if (maxLines === 1) {\n            return el.scrollWidth > el.clientWidth;\n        }\n        return el.scrollHeight > el.clientHeight;\n    }\n    /** 获取文本视觉上的行数 */\n    #getActualLines() {\n        const targetEl = this.targetEl;\n        const collapseEl = this.collapseEl;\n        const lh = this.#lineHeight;\n        return Math.floor((targetEl.clientHeight - collapseEl.clientHeight) / lh);\n    }\n}\n"
+    ],
+    "names": [
+        "removeElement",
+        "element",
+        "parentNode",
+        "removeChild",
+        "addElementClass",
+        "el",
+        "className",
+        "classList",
+        "add",
+        "removeElementClass",
+        "remove",
+        "isDestroyed",
+        "maxLines",
+        "targetEl",
+        "undefined",
+        "expandEl",
+        "collapseEl",
+        "placeholderEl",
+        "isOpen",
+        "lineHeight",
+        "constructor",
+        "options",
+        "document",
+        "createElement",
+        "innerText",
+        "expandElText",
+        "collapseElText",
+        "onclick",
+        "this",
+        "handleExpand",
+        "handleCollapse",
+        "prepend",
+        "appendChild",
+        "update",
+        "destroy",
+        "setupClass",
+        "getLineHeight",
+        "setupPlaceholderStyle",
+        "setupBtClass",
+        "style",
+        "setProperty",
+        "getActualLines",
+        "isEllipsisActive",
+        "height",
+        "clientHeight",
+        "parseFloat",
+        "getComputedStyle",
+        "scrollWidth",
+        "clientWidth",
+        "scrollHeight",
+        "lh",
+        "Math",
+        "floor"
+    ],
+    "mappings": "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"
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "smart-text-ellipsis",
+    "version": "0.0.2",
+    "description": "A simple custom scrollbar plugin",
+    "author": "wuzhanggui",
+    "license": "MIT",
+    "type": "module",
+    "keywords": [
+        "ellipsis"
+    ],
+    "homepage": "https://wurencaideli.github.io/smart-text-ellipsis/demo.html",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/wurencaideli/smart-text-ellipsis"
+    },
+    "bugs": {
+        "url": "https://github.com/wurencaideli/smart-text-ellipsis/issues"
+    },
+    "jspm": {
+        "main": "dist/smart-text-ellipsis.cjs.js",
+        "registry": "jspm"
+    },
+    "main": "dist/smart-text-ellipsis.cjs.js",
+    "module": "dist/smart-text-ellipsis.esm.js",
+    "style": "dist/smart-text-ellipsis.css",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "dev": "rollup -c -w",
+        "build": "rollup -c",
+        "build-sass": "node ./build-sass.js"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-terser": "^0.4.4",
+        "autoprefixer": "^10.4.21",
+        "clean-css": "^5.3.3",
+        "postcss": "^8.5.6",
+        "postcss-preset-env": "^10.2.3",
+        "rollup": "^3.29.5",
+        "sass": "^1.89.2"
+    }
+}

package/src/common.js

@@ -0,0 +1,11 @@
+export function removeElement(element) {
+    if (element && element.parentNode) {
+        element.parentNode.removeChild(element);
+    }
+}
+export function addElementClass(el, className) {
+    el.classList.add(className);
+}
+export function removeElementClass(el, className) {
+    el.classList.remove(className);
+}

package/src/index.js

@@ -0,0 +1,138 @@
+import { addElementClass, removeElement, removeElementClass } from './common';
+export class SmartTextEllipsis {
+    isDestroyed = false;
+    maxLines = 0;
+    targetEl = undefined;
+    expandEl = undefined;
+    collapseEl = undefined;
+    placeholderEl = undefined;
+    isOpen = false;
+    #lineHeight = 0;
+    constructor(options = {}) {
+        const targetEl = options.targetEl;
+        const isOpen = options.isOpen;
+        const maxLines = options.maxLines;
+        const expandEl = document.createElement('span');
+        const collapseEl = document.createElement('div');
+        const placeholderEl = document.createElement('div');
+        expandEl.innerText = options.expandElText || 'Expand';
+        collapseEl.innerText = options.collapseElText || 'Collapse';
+        expandEl.onclick = () => {
+            this.#handleExpand();
+        };
+        collapseEl.onclick = () => {
+            this.#handleCollapse();
+        };
+        addElementClass(collapseEl, 'smart-text-ellipsis-collapse');
+        addElementClass(expandEl, 'smart-text-ellipsis-expand');
+        addElementClass(placeholderEl, 'smart-text-ellipsis-placeholder');
+        targetEl.prepend(expandEl);
+        targetEl.prepend(placeholderEl);
+        targetEl.appendChild(collapseEl);
+        this.targetEl = targetEl;
+        this.isOpen = isOpen;
+        this.maxLines = maxLines;
+        this.expandEl = expandEl;
+        this.collapseEl = collapseEl;
+        this.placeholderEl = placeholderEl;
+        this.update();
+    }
+    /** 销毁实例 */
+    destroy() {
+        this.isOpen = true;
+        removeElement(this.expandEl);
+        removeElement(this.collapseEl);
+        this.#setupClass();
+        this.targetEl = undefined;
+        this.expandEl = undefined;
+        this.collapseEl = undefined;
+        this.isDestroyed = true;
+    }
+    /** 更新样式 */
+    update() {
+        if (this.isDestroyed) return;
+        this.#lineHeight = this.#getLineHeight();
+        this.#setupClass();
+        this.#setupPlaceholderStyle();
+        this.#setupBtClass();
+    }
+    #handleExpand() {
+        if (this.isDestroyed) return;
+        this.isOpen = true;
+        this.update();
+    }
+    #handleCollapse() {
+        if (this.isDestroyed) return;
+        this.isOpen = false;
+        this.update();
+    }
+    /** 设置容器的类名 */
+    #setupClass() {
+        const targetEl = this.targetEl;
+        if (!targetEl) return;
+        if (!this.isDestroyed) {
+            targetEl.style.setProperty('--max-lines', `${this.maxLines}`);
+        } else {
+            targetEl.style.setProperty('--max-lines', undefined);
+        }
+        if (this.maxLines == 1) {
+            addElementClass(targetEl, 'smart-text-ellipsis-one');
+            removeElementClass(targetEl, 'smart-text-ellipsis-more');
+        } else {
+            addElementClass(targetEl, 'smart-text-ellipsis-more');
+            removeElementClass(targetEl, 'smart-text-ellipsis-one');
+        }
+        if (this.isOpen) {
+            removeElementClass(targetEl, 'smart-text-ellipsis-more');
+            removeElementClass(targetEl, 'smart-text-ellipsis-one');
+        }
+        removeElementClass(targetEl, 'is-ellipsis');
+        removeElementClass(targetEl, 'is-exceeded-max-line');
+    }
+    /** 设置按钮的类名 */
+    #setupBtClass() {
+        if (this.isDestroyed) return;
+        const targetEl = this.targetEl;
+        if (!targetEl) return;
+        if (this.isOpen) {
+            // 如果行数超过了，显示收缩按钮
+            if (this.#getActualLines() > this.maxLines) {
+                addElementClass(targetEl, 'is-exceeded-max-line');
+            }
+        } else {
+            // 如果字体省略了，显示展开按钮
+            if (this.#isEllipsisActive()) {
+                addElementClass(targetEl, 'is-ellipsis');
+            }
+        }
+    }
+    /** 设置占位元素的样式 */
+    #setupPlaceholderStyle() {
+        const lineHeight = this.#lineHeight;
+        const placeholderEl = this.placeholderEl;
+        const targetEl = this.targetEl;
+        placeholderEl.style.height = `${targetEl.clientHeight - lineHeight}px`;
+    }
+    /** 获取一行文本的高度 */
+    #getLineHeight() {
+        const targetEl = this.targetEl;
+        if (!targetEl) return;
+        return parseFloat(getComputedStyle(targetEl).lineHeight) || 24;
+    }
+    /** 判断是否省略了 */
+    #isEllipsisActive() {
+        const maxLines = this.maxLines;
+        const el = this.targetEl;
+        if (maxLines === 1) {
+            return el.scrollWidth > el.clientWidth;
+        }
+        return el.scrollHeight > el.clientHeight;
+    }
+    /** 获取文本视觉上的行数 */
+    #getActualLines() {
+        const targetEl = this.targetEl;
+        const collapseEl = this.collapseEl;
+        const lh = this.#lineHeight;
+        return Math.floor((targetEl.clientHeight - collapseEl.clientHeight) / lh);
+    }
+}

package/src/index.scss

@@ -0,0 +1,51 @@
+.smart-text-ellipsis-more {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--max-lines);
+    -webkit-box-orient: vertical;
+    display: -moz-box; /* 旧 Firefox 私有（已废弃）可省略 */
+    line-clamp: var(--max-lines); /* 标准属性 */
+    box-orient: vertical;
+    overflow: hidden;
+}
+.smart-text-ellipsis-one {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.is-ellipsis {
+    > .smart-text-ellipsis-expand {
+        display: initial;
+    }
+    > .smart-text-ellipsis-placeholder {
+        display: initial;
+    }
+}
+.is-exceeded-max-line {
+    > .smart-text-ellipsis-collapse {
+        display: flex;
+    }
+}
+.smart-text-ellipsis-expand {
+    display: none;
+    float: right;
+    clear: both;
+    cursor: pointer;
+    color: #1178d9;
+    position: relative;
+    z-index: 2;
+}
+.smart-text-ellipsis-collapse {
+    display: none;
+    flex-direction: row;
+    justify-content: flex-end;
+    cursor: pointer;
+    color: #1178d9;
+    position: relative;
+    z-index: 2;
+}
+.smart-text-ellipsis-placeholder {
+    display: none;
+    float: right;
+    width: 0;
+    pointer-events: none;
+}