HTML文本无法自适应屏幕尺寸导致溢出问题求助

我用了一段简单的HTML结构和CSS样式，但页面文本无法随屏幕尺寸自适应，出现内容溢出。相关代码如下：

HTML代码 #

<div class="no-task-wrapper">
  <h2>Oops! Looks like there are no <span>Tasks</span></h2>
</div>

CSS代码 #

.no-task-wrapper {
    color: rgb(122, 122, 122);
    display: grid;
    place-items: center;
}

.no-task-wrapper h2 {
    font-size: 2rem;
    font-family: var(--main-font);
}

.no-task-wrapper span {
    color: var(--main-color);
    font-size: inherit;
}

状态说明 #

• 无溢出状态：宽屏幕下文本完整居中显示，无截断。
• 溢出状态：小屏幕下文本超出容器范围，部分内容被截断。

解决方案 #

方法1：动态字号+强制换行

用CSS的clamp()函数实现字号随视窗宽度自适应，配合换行属性避免溢出：

.no-task-wrapper h2 {
    font-size: clamp(1.2rem, 3vw, 2rem); /* 最小1.2rem，最大2rem，按视窗比例自动调整 */
    font-family: var(--main-font);
    overflow-wrap: break-word; /* 强制长文本换行 */
    text-align: center; /* 换行后保持居中对齐 */
}

clamp()会自动在设定的区间内根据视窗宽度调整字号，无需手动设置多个断点；overflow-wrap确保文本不会因过长溢出容器。

方法2：媒体查询精准控制字号

如果需要对特定屏幕尺寸做更精细调整，可使用媒体查询：

.no-task-wrapper h2 {
    font-size: 2rem;
    font-family: var(--main-font);
    overflow-wrap: break-word;
    text-align: center;
}

/* 平板及以下屏幕 */
@media (max-width: 768px) {
    .no-task-wrapper h2 {
        font-size: 1.5rem;
    }
}

/* 手机屏幕 */
@media (max-width: 480px) {
    .no-task-wrapper h2 {
        font-size: 1.2rem;
    }
}

通过设定不同宽度断点，针对性缩小字号，配合换行属性彻底解决溢出问题。

内容的提问来源于stack exchange，提问作者Zohaib Khan