CSS文本裁剪异常求助：容器缩小时文本消失而非裁剪

问题根源 #

• 父容器未设置overflow: hidden，文本超出容器后直接溢出可视区域，看起来像是消失
• 标题元素未限制宽度，且缺少单行裁剪必备的white-space: nowrap属性，无法触发文本裁剪逻辑

修改后的代码 #

CSS 代码

.finalCutStyleButton{
    width: 90mm;
    height: 20mm;
    background-color: #b3be9e;
    animation: test 2s ease-in;
    overflow: hidden; /* 新增：裁剪超出容器的内容 */
}

@keyframes test{
    from{
        width: 90mm;
    }
    to{
        width: 30mm;
    }
}
.title{
    font-size: 10mm;
    font-family: 'SFProBold', sans-serif;
    font-weight: bold;
    display: inline-block;
    width: 100%; /* 让标题宽度随父容器同步缩小 */
    white-space: nowrap; /* 强制文本单行显示，避免换行 */
    text-overflow: clip; /* 裁剪超出部分，替换为ellipsis可显示省略号 */
    margin: 0; /* 移除h1默认外边距，防止文本被挤出容器 */
}

HTML 代码

<div class="finalCutStyleButton adjustPadding">
   <h1 class="title">VIDEO EDITING</h1>
</div>

关键说明 #

• overflow: hidden必须添加在父容器上，负责截断所有超出容器边界的内容
• white-space: nowrap是单行文本裁剪的前提，确保文本不会自动换行
• 若需要用省略号替代被裁剪的文本，将text-overflow: clip改为text-overflow: ellipsis即可

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