两行标题自适应

This commit is contained in:
xianyi
2025-12-05 11:55:40 +08:00
parent 34e9c58392
commit 7eb8e1b67b
2 changed files with 73 additions and 2 deletions

View File

@@ -22,6 +22,29 @@
padding: 32px 42px;
}
.ui7-basic-title {
height: 91px;
display: flex;
align-items: center;
justify-content: center;
overflow-wrap: break-word;
word-break: break-word;
color: rgba(0, 45, 93, 1);
font-size: 52px;
font-family: NotoSansCJKsc-Bold;
font-weight: 700;
text-align: center;
white-space: normal;
line-height: 91px;
overflow: hidden;
}
.ui7-basic-title.compact {
font-size: 42px;
line-height: 45px;
height: 91px;
}
.ui7-text-content .paragraph_1 {
font-family: NotoSansCJKsc-Medium;
font-weight: 500;

View File

@@ -103,6 +103,8 @@ const UI7: React.FC = () => {
const [currentStep, setCurrentStep] = useState(0);
const [hasSignature, setHasSignature] = useState(false);
const [currentPdfPageCount, setCurrentPdfPageCount] = useState(0);
const titleRef = useRef<HTMLSpanElement | null>(null);
const [isTitleCompact, setIsTitleCompact] = useState(false);
const totalRequiredSignatures = pdfInfoList.length + 1;
const isInstructionStep = currentStep === 0;
@@ -247,6 +249,50 @@ const UI7: React.FC = () => {
setHasSignature(false);
}, [currentStep]);
// 检测标题文本是否超过一行,如果超过则应用缩小样式
useEffect(() => {
const checkTitleOverflow = () => {
if (!titleRef.current) return;
const element = titleRef.current;
// 先移除 compact 类,以正常大小检测
element.classList.remove('compact');
// 使用 requestAnimationFrame 确保 DOM 已更新
requestAnimationFrame(() => {
if (!element) return;
// 获取实际内容高度
const scrollHeight = element.scrollHeight;
// 单行高度为 91pxline-height
const singleLineHeight = 91;
// 如果内容高度超过单行高度,说明换行了
const needsCompact = scrollHeight > singleLineHeight;
setIsTitleCompact(needsCompact);
// 如果需要 compact添加类名
if (needsCompact) {
element.classList.add('compact');
}
});
};
// 延迟执行,确保 DOM 已渲染
const timer = setTimeout(() => {
checkTitleOverflow();
}, 100);
// 监听窗口大小变化
window.addEventListener('resize', checkTitleOverflow);
return () => {
clearTimeout(timer);
window.removeEventListener('resize', checkTitleOverflow);
};
}, [currentStep, currentPdfName, isInstructionStep]);
const resetCountdown = useCallback(() => {
setCountdown(5);
setShowWaitButton(true);
@@ -527,8 +573,10 @@ const UI7: React.FC = () => {
<div className="basic-root">
<div className="basic-white-block">
<div className="basic-content">
<span className="basic-title">
<span
ref={titleRef}
className={`ui7-basic-title ${isTitleCompact ? 'compact' : ''}`}
>
{!isInstructionStep && currentPdfName ? `${currentPdfName}` : "检测项目知情同意书确认"}
</span>
<DecorLine />