使用 `tolocaletimestring()` 获取本地时间后，因字体过大或容器宽度不足导致文本换行、重叠或溢出，可通过 css 的 `white-space: nowrap` 强制单行显示，无需切换为 24 小时制即可彻底解决。
在 React 应用中动态渲染实时时间（如 12:34:56 PM）时，若设置较大字号（如 font-size: 100px）而未约束文本换行行为，浏览器可能因容器宽度受限或字体度量差异，将长字符串（尤其是含空格和冒号的 AM/PM 格式）自动折行——导致视觉上“重叠”或错位，看似文字堆叠，实则是换行后多行内容在有限垂直空间内挤压所致。
根本解决方案是显式控制文本换行行为。只需在承载时间的 <h1> 元素上添加 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 (
<div className="container">
<h1>{currTime}</h1>
<button onClick={() => setCurrTime(new Date().toLocaleTimeString())}>
Get Time
</button>
</div>
);
}
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），零侵入修改时间逻辑，专注样式层修复，简洁、可靠、符合现代前端最佳实践。
