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

）元素，将用户输入的文本内容设置为该元素的textContent，然后对这个包裹文本的元素应用CSS样式来管理其宽度和溢出行为。

步骤一：修改JavaScript，包裹文本内容

我们需要调整todoList函数，使其在创建列表项时，不是直接追加文本节点，而是创建一个元素来承载文本。

function todoList() {
    // 获取用户输入值
    const item: string = (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 = document.getElementById('todoInput')
    resetInput.value = '';
})

步骤二：应用CSS样式控制文本容器

现在，我们有了li元素内的.todo-text 元素，可以对其应用CSS来控制其在Flex布局中的行为和溢出显示。

/* 基础样式，与原代码保持一致 */
* {
    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;
}

关键CSS属性解释

• li { display: flex; align-items: center; gap: 20px; }:
  • display: flex;：将li元素设置为Flex容器，使其子元素（复选框、文本容器、按钮）能够进行弹性布局。
  • align-items: center;：使Flex容器中的所有子元素在交叉轴（垂直方向）上居中对齐，提升视觉美观度。
  • gap: 20px;：为Flex项目之间提供20像素的间距，避免元素紧贴在一起。
• .todo-text { flex-grow: 1; flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }:
  • flex-grow: 1;：允许.todo-text元素在有剩余空间时尽可能地扩展，占据除复选框和按钮之外的所有可用空间。
  • flex-shrink: 1;：允许.todo-text元素在空间