使用 `tolocaletimestring()` 获取本地时间后，因字体过大或容器宽度不足导致文本换行、重叠或溢出，可通过 css 的 `white-space: nowrap` 强制单行显示，无需切换为 24 小时制即可彻底解决。

在 react 应用中动态渲染实时时间（如 12:34:56 PM）时，若设置较大字号（如 font-size: 100px）而未约束文本换行行为，浏览器可能因容器宽度受限或字体度量差异，将长字符串（尤其是含空格和冒号的 AM/PM 格式）自动折行——导致视觉上“重叠”或错位，看似文字堆叠，实则是换行后多行内容在有限垂直空间内挤压所致。

根本解决方案是显式控制文本换行行为。只需在承载时间的

元素上添加 white-space: nowrap：

h1 {   font-size: 100px;   white-space: nowrap; /* 关键：禁止换行，确保时间始终单行渲染 */   margin: 0;   line-height: 1.2; /* 可选：优化垂直居中与可读性 */ }

同时建议优化组件逻辑以避免潜在问题：

• 使用 useEffect 替代裸 setInterval，防止重复挂载定时器；
• 添加清理机制，避免内存泄漏；
• 为容器设置明确宽高与 text-align: center，增强布局稳定性。

完整改进示例：

import { useState, useEffect } from 'react';  function App() {   const [currTime, setCurrTime] = useState(new Date().toLocaleTimeString());    useEffect(() => {     const timer = setInterval(() => {       setCurrTime(new Date().toLocaleTimeString());     }, 1000);      return () => clearInterval(timer); // 清理定时器   }, []);    return (     
       
{currTime}
        setCurrTime(new Date().toLocaleTimeString())}>         Get Time            
   ); }  export default app;

注意事项：

• white-space: nowrap 仅阻止换行，不解决容器过窄导致的水平溢出；若需响应式适配，可配合 overflow: hidden 或 text-overflow: ellipsis（需同时设 width 和 overflow）；
• 避免在 setInterval 中直接调用 useState setter 多次（原代码中 getTime 被重复调用可能引发竞态），推荐函数式更新或统一收口于 useEffect；
• 不同地区 toLocaleTimeString() 输出长度不同（如 “1:2:3 PM” vs “12:34:56 PM”），nowrap 可确保所有格式统一单行，保持 ui 稳定性。

此方案完全兼容 12 小时制（含 AM/PM），零侵入修改时间逻辑，专注样式层修复，简洁、可靠、符合现代前端最佳实践。