pb-sxp-ui 1.15.23 → 1.15.25

package/dist/pb-ui.js

@@ -10207,34 +10207,36 @@
         const [isShow, setIsShow] = React.useState(false);
         const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
         const textLineClamp = Number(lineClamp || 2);
-        const multiRow = React.useRef(null);
+        const realRef = React.useRef(null);
+        const clampRef = React.useRef(null);
         const observerRef = React.useRef();
         const handleClick = () => {
             setIsShowMore(!isShowMore);
         };
         const checkOverflow = React.useCallback(() => {
-            if (!multiRow.current || !isPost)
+            if (!realRef.current || !clampRef.current || !isPost || !text || isShowMore)
                 return;
-            const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
-            const maxHeight = lineHeight * textLineClamp;
-            // 添加1px容错，解决部分机型计算误差
-            setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
-        }, [isPost, text, textLineClamp]);
+            requestAnimationFrame(() => {
+                const realHeight = realRef.current.getBoundingClientRect().height;
+                const clampHeight = clampRef.current.getBoundingClientRect().height;
+                const isActuallyClamped = realHeight > clampHeight + 1;
+                setIsShow(isActuallyClamped);
+            });
+        }, [isPost, text, isShowMore]);
+        // 增强版监听（同时监听字体加载）
         React.useEffect(() => {
-            if (!multiRow.current)
+            if (!realRef.current)
                 return;
-            // 使用ResizeObserver监听尺寸变化
             observerRef.current = new ResizeObserver(checkOverflow);
-            observerRef.current.observe(multiRow.current);
-            // 初始检查
+            observerRef.current.observe(realRef.current);
             checkOverflow();
             return () => {
                 var _a;
                 (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
             };
         }, [checkOverflow]);
-        return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
-            React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
+        return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)', overflow: 'hidden' }), hidden: !text || text === '' },
+            React.createElement("div", { ref: clampRef, style: Object.assign(Object.assign({}, (!isShowMore &&
                     isPost && {
                     WebkitLineClamp: textLineClamp,
                     lineClamp: textLineClamp,
@@ -10242,7 +10244,19 @@
                     overflow: 'hidden',
                     display: '-webkit-box',
                     WebkitBoxOrient: 'vertical'
-                })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
+                })), { wordBreak: 'break-word', textRendering: 'geometricPrecision', fontKerning: 'none', textSizeAdjust: '100%', boxSizing: 'border-box', contain: 'content' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
+            React.createElement("div", { ref: realRef, style: {
+                    wordBreak: 'break-word',
+                    textRendering: 'geometricPrecision',
+                    fontKerning: 'none',
+                    textSizeAdjust: '100%',
+                    boxSizing: 'border-box',
+                    contain: 'content',
+                    visibility: 'hidden',
+                    position: 'absolute',
+                    opacity: 0,
+                    clipPath: 'inset(100%)'
+                }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
             text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                     __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
                 } }))));
@@ -20181,4 +20195,3 @@ Made in Italy` })));
     Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
-//# sourceMappingURL=pb-ui.js.map