动态列表项中长文本溢出问题的解决方案：兼顾输入限制与显示优化

<li style="display: flex; gap: 20px; width: 30rem;">
    <input type="checkbox">
    <!-- 这里是用户输入的文本，没有包裹元素 -->
    这是一个非常非常长的任务描述，它可能会导致布局溢出，因为它没有被限制宽度。
    <button>Delete</button>
</li>

<input type="text" id="todoInput" placeholder="Fill in your plan" maxlength="50">

function todoList(): void { // 明确函数返回类型为void
    // 获取用户输入值
    const item: string = (<HTMLInputElement>document.getElementById('todoInput')).value;

    // 创建一个span元素来包裹文本内容
    const textWrapper = document.createElement('span');
    textWrapper.classList.add('todo-text-content'); // 添加一个类名以便CSS选择
    textWrapper.textContent = item; // 使用textContent来设置文本内容

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

    // 创建删除按钮
    const button: HTMLButtonElement = document.createElement("button"); // 明确类型为HTMLButtonElement
    button.id = "button";
    const btnText = document.createTextNode('Delete');
    button.appendChild(btnText);

    // 添加删除事件监听器
    button.addEventListener("click", (e: MouseEvent) => { // 明确事件类型为MouseEvent
        newItem.remove();
    });

    // 创建复选框
    const checkbox: HTMLInputElement = document.createElement("input"); // 明确类型为HTMLInputElement
    checkbox.type = "checkbox";
    checkbox.id = "checkbox";
    checkbox.name = "form-checkbox";

    // 将复选框、文本容器和按钮添加到列表项
    newItem.appendChild(checkbox);
    newItem.appendChild(textWrapper); // 将包裹后的span添加到列表项
    newItem.appendChild(button);

    // 将列表项添加到有序列表
    const todoListElement = document.getElementById('todoList');
    if (todoListElement) { // 检查元素是否存在
        todoListElement.appendChild(newItem);
    }
}

// 表单提交事件处理，重置输入框
const form = document.getElementById('todoForm');
if (form) { // 检查元素是否存在
    form.addEventListener("submit", (e: Event) => { // 明确事件类型为Event
        e.preventDefault();

        const resetInput = <HTMLInputElement>document.getElementById('todoInput');
        if (resetInput) { // 检查元素是否存在
            resetInput.value = '';
        }
    });
}

/* 列表项的整体Flexbox布局 */
li {
    display: flex;
    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; /* 添加一些内边距，使内容不紧贴边缘 */
    box-sizing: border-box; /* 确保padding不增加总宽度 */
}

/* 针对文本内容的样式 */
li .todo-text-content {
    flex-grow: 1; /* 允许文本内容占据剩余空间 */
    flex-shrink: 1; /* 允许文本内容在空间不足时收缩 */
    min-width: 0; /* 允许文本内容在必要时收缩到0，防止其内容溢出flex容器 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    white-space: nowrap; /* 文本不换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    /*
     * max-width: calc(100% - 1.3rem - 80px - 20px);
     * 上述max-width的计算方式在动态场景下可能不够健壮。
     * 更好的做法是依赖flex-grow, flex-shrink, min-width: 0的组合，
     * 让文本容器自动适应可用空间。
     * 如果仍需硬性限制，请确保计算准确，并考虑其他元素的动态宽度。
     */
}

/* 调整复选框的样式，确保其有固定宽度且不被挤压 */
#checkbox {
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0; /* 不允许复选框收缩 */
    margin-right: 0; /* 移除默认可能存在的margin */
    /* ... 其他样式保持不变 ... */
}

/* 调整按钮的样式，确保其宽度固定或根据内容调整，但不挤压文本 */
#button {
    flex-shrink: 0; /* 不允许按钮收缩 */
    padding: 5px 10px; /* 示例内边距 */
    width: auto; /* 根据内容调整宽度 */
    max-width: fit-content; /* 保持原有的fit-content */
    margin-left: auto; /* 将按钮推到最右侧，如果需要 */
    /* ... 其他样式保持不变 ... */
}