动态列表项中长文本溢出处理：HTML、CSS与JavaScript的协同策略

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

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

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

    // 创建列表项
    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";

    // 将复选框、包裹后的文本元素和按钮追加到列表项
    newItem.appendChild(checkbox);
    newItem.appendChild(textWrapper); // 替换原来的text节点
    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 = '';
})

/* 基础样式，与原代码保持一致 */
* {
    margin: 0;
    padding: 0;
}

body {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #f5f5f5;
    color: #4d4d4d;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    font-size: 100px;
    font-weight: 100;
    color: rgba(175, 47, 47, 0.15);
}

#todoForm {
    display: flex;
    flex-direction: row;
    width: 30rem;
    height: 4rem;
    border-width: 0;
    box-shadow: 0 3px 9px 3px #cdcaca;
}

#scrolldown-menu-toggle {
    border-width: 0;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    background: #ffffff;
    color: #b6adad;
    opacity: 1;
}

#todoInput {
    width: 95%;
    border-width: 0;
    font-size: 130%;
}

#todoInput:focus {
    outline: none;
}

::placeholder {
    color: #b6adad;
    opacity: 1;
}

/* 列表项的CSS调整 */
li {
    display: flex; /* 启用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%;
    gap: 20px; /* 子元素之间的间距 */
    padding: 0 15px; /* 列表项左右内边距，提供一些呼吸空间 */
}

/* 复选框样式 */
#checkbox {
    width: 1.3rem;
    height: 1.3rem;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none;
    outline: none;
    cursor: pointer;
    flex-shrink: 0; /* 确保复选框不会收缩 */
}
#checkbox:checked {
    background-color: #b3cbb2;
}

/* 文本容器样式 */
li .todo-text {
    flex-grow: 1; /* 允许文本容器占据剩余空间 */
    flex-shrink: 1; /* 允许文本容器在空间不足时收缩 */
    min-width: 0; /* 这是flex容器中元素允许收缩到0的关键 */
    /* max-width: 15rem; /* 您可以设置一个固定的最大宽度，或者让flex-grow/shrink来动态计算 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    white-space: nowrap; /* 防止文本换行，强制单行显示 */
    text-overflow: ellipsis; /* 当文本溢出时，显示省略号 */
}

/* 按钮样式 */
#button {
    background: red;
    color: white; /* 按钮文字颜色 */
    border: none; /* 移除边框 */
    padding: 8px 15px; /* 按钮内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer;
    flex-shrink: 0; /* 确保按钮不会收缩 */
    /* 移除 width: 100%; 因为在flex容器中会导致问题 */
    max-width: fit-content; /* 按钮宽度适应内容 */
}

.info {
    margin-top: 6rem;
}