动态列表项中长文本溢出布局问题的解决方案

<input type="text" id="todoInput" placeholder="填写您的计划" maxlength="50">

function todoList() {
    // 获取用户输入文本
    const itemText: string = (<HTMLInputElement>document.getElementById('todoInput')).value;

    // 创建一个 span 元素来包装文本
    const textWrapper = document.createElement('span');
    textWrapper.className = 'todo-item-text'; // 添加一个类名以便CSS选择和样式化
    textWrapper.textContent = itemText; // 将用户输入文本赋给 span 的文本内容

    // 创建列表项
    const newItem = document.createElement('li');

    // 创建删除按钮
    const button: any = document.createElement("button");
    button.id = "button";
    const btnText = document.createTextNode('Delete');
    button.appendChild(btnText);
    button.addEventListener("click", (e: any) => {
        newItem.remove();
    });

    // 创建复选框
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "checkbox";
    checkbox.name = "form-checkbox";

    // 将 checkbox, 文本包装元素 和 button 添加到列表项
    newItem.appendChild(checkbox);
    newItem.appendChild(textWrapper); // 将包装后的文本元素添加到newItem
    newItem.appendChild(button);

    // 将列表项添加到有序列表
    // @ts-ignore
    document.getElementById('todoList').appendChild(newItem);
}

const form = (document.getElementById('todoForm'))
// @ts-ignore
form.addEventListener("submit", (e) => {
    e.preventDefault();

    // 提交后重置输入字段
    const resetInput = <HTMLInputElement>document.getElementById('todoInput')
    resetInput.value = '';
})

li {
    display: flex; /* 使用Flexbox布局 */
    flex-direction: row;
    width: 30rem;
    max-width: 30rem;
    height: 4rem;
    border-width: 0;
    box-shadow: 0 3px 9px 3px #cdcaca;
    background: white;
    align-items: center; /* 垂直居中对齐所有子元素 */
    font-size: 130%;
    min-width: 0;
    gap: 20px; /* 子元素之间的间距 */
    padding: 0 10px; /* 列表项的内边距 */
}

.todo-item-text {
    flex-grow: 1; /* 允许文本包装元素占据所有可用空间 */
    flex-shrink: 1; /* 允许文本包装元素在空间不足时收缩 */
    min-width: 0; /* 关键：允许文本内容在Flexbox中缩小到0，防止溢出 */
    overflow: hidden; /* 隐藏超出容器的文本 */
    white-space: nowrap; /* 强制文本不换行 */
    text-overflow: ellipsis; /* 溢出时显示省略号 */
    /* max-width 可以根据需要显式设置，但通常在flex-grow: 1和min-width: 0的组合下，
       Flexbox会自动为它分配最大可用空间，同时尊重其他flex-shrink: 0的元素 */
}

#checkbox {
    flex-shrink: 0; /* 防止复选框被挤压 */
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 10px; /* 增加复选框右侧间距 */
    /* ... 其他样式保持不变 ... */
}

#button {
    flex-shrink: 0; /* 防止按钮被挤压 */
    background: red;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    /* ... 其他样式保持不变 ... */
}