为什么我的 <input file> 溢出了我的网格容器？

Question

我在一个 4 列网格容器中有一个自定义文件输入元素和一个 16px 的间隙，用于保存我的输入。我的问题是当我选择一个长名称如 "XXXXX02000000SDD000D.pdf" 的文件时，我的自定义输入元素变得如此之大，以至于 line-clamp 不起作用并溢出了我的网格容器。碰巧当我选择名称很长但有几个单词的文件时 "my file called my beloved pdf.pdf" line-clamp 有效，因此我的网格容器不会溢出。问题是我的入口还是我的容器？

当我选择长名称但有多个单词的文件时：

我选择了一个没有空格的大字文件，我的容器溢出了：

我的输入文件元素

        <label className={`label`}>
            {props.label}
            <span className='file-input'>
                <span className='file-input__icon'><i class="fas fa-upload"></i></span>
                <span className='file-input__file-name'>
                    <span className='file-input__file-name-text'>{fileName}</span>
                </span>
                <input
                    className='file-input__input'
                    type='file'
                    onChange={handleChange}
                    accept='.pdf' />
            </span>
        </label>

我的输入文件CSS

.file-input {
    position: relative;
    display: flex;
    width: 100%;
    height: 40px;
    border-radius: var(--border-radius-size);
    color: inherit;
}

.file-input:hover {
    box-shadow: 0 0 2px 1px var(--soft-grey);
    outline: none;
}

.file-input__input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.file-input__icon {
    border: 1px solid var(--soft-grey);
    border-top-left-radius: var(--border-radius-size);
    border-bottom-left-radius: var(--border-radius-size);
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    height: 100%;
    background-color: var(--very-soft-grey);
}

.file-input__file-name {
    border-right: 1px solid var(--soft-grey);
    border-top: 1px solid var(--soft-grey);
    border-bottom: 1px solid var(--soft-grey);
    border-top-right-radius: var(--border-radius-size);
    border-bottom-right-radius: var(--border-radius-size);
    display: inline-flex;
    align-items: center;
    padding: 0 .5rem;
    height: 100%;
    width: 100%;
}

.file-input__file-name-text {
    display: -webkit-box;
    width: 100%;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

我的网格容器

<div className='section__inputs-container'>
            <Input
                name='nombres'
                value={inputsData.nombres}
                label='Nombres'
                placeholder='Enrique Alegre'
                type='text'
            />
            // and more inputs ...
</div>

我的CSS

.section__inputs-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

Answer 1

我的解决方案是将此 class 放入我的自定义文件输入的文本容器中，以便属性剪切长单词并环绕其容器。

.file-input__file-name-text {
   >>>>>>>>>word-break: break-all;<<<<<<<<<<
   display: -webkit-box;
   width: 100%;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
}

为什么我的 <input file> 溢出了我的网格容器？

WHY my <input file> overflows my grid container?

html

css

overflow

css-grid