在固定宽度 div 下实现字体自适应大小，防止文本超出宽度且不换行，可以使用几种方法：
1. 使用 vw 和 vh 单位：
这种方法允许你根据视口宽度设置字体大小。例如，font-size: 2vw; 表示字体大小为视口宽度的 2%。 这可以确保字体大小与 div 的宽度成比例缩放。但是，这种方法的缺点在于字体大小会随着视口大小的变化而变化，即使 div 的宽度是固定的。 如果 div 宽度固定，而视口宽度变化，字体大小仍然会改变，这可能不是你想要的效果。
2. 使用 JavaScript 动态调整字体大小：
这是最可靠和灵活的方法。你可以使用 JavaScript 获取 div 的宽度和文本内容的宽度，然后根据需要调整字体大小，直到文本内容完全适合 div 宽度。
function adjustFontSize(divId) {
const div = document.getElementById(divId);
const text = div.textContent;
let fontSize = parseInt(window.getComputedStyle(div, null).getPropertyValue('font-size'));
while (div.scrollWidth > div.clientWidth) {
fontSize--;
div.style.fontSize = fontSize + 'px';
}
}
// 在页面加载完成后调用函数
window.addEventListener('load', function() {
adjustFontSize('your-div-id');
});
// 在窗口大小改变时重新调整字体大小
window.addEventListener('resize', function() {
adjustFontSize('your-div-id');
});
将 your-div-id 替换为你 div 的 ID。 这个代码片段会循环减小字体大小，直到文本内容不再溢出 div。
3. 使用 CSS text-overflow 属性 (不推荐，但可以部分解决问题):
这个属性可以让你控制文本溢出 div 时的显示方式。你可以将其设置为 ellipsis，以便在文本溢出时显示省略号。但这并不会真正调整字体大小，只是隐藏了溢出的部分。
#your-div-id {
width: 200px;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
4. 使用 CSS fit-text 属性 (实验性，兼容性有限):
fit-text 属性可以自动调整字体大小以适应容器的宽度。然而，这个属性仍然是实验性的，并且浏览器兼容性有限。
#your-div-id {
width: 200px;
font-size: fit-content; /* 自动调整字体大小 */
}
最佳实践:
推荐使用 JavaScript 动态调整字体大小的方法，因为它提供了最佳的控制和灵活性，并且可以确保文本始终完全适合 div 宽度。 如果兼容性很重要，并且只需要截断文本，可以使用 text-overflow: ellipsis。 避免使用 vw 单位，因为它会导致字体大小根据视口宽度而不是 div 宽度进行缩放。 fit-text 虽然方便，但由于兼容性问题，在生产环境中使用需要谨慎。
记住根据你的具体需求选择最合适的方法。 如果你的文本内容是动态的，JavaScript 方法是最好的选择。 如果文本内容是静态的，并且你只需要截断溢出部分，text-overflow: ellipsis 就足够了。