我需要让大文本留在 div 内，如果它喜欢接触 div 的一侧，它会转到下一行，并且在这个大文本的末尾必须是一个十字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo List</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
</head>
<body>
<div id="container">
<div class="darkMode">
<label class="inline-flex items-center cursor-pointer">
<input
type="checkbox"
id="toggleDarkMode"
value=""
class="sr-only peer"
autocomplete="off"
/>
<div
class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"
></div>
<span
class="darkModeText ms-3 text-base font-medium text-gray-900 dark:text-gray-300"
>Dark Mode</span
>
</label>
</div>
<div id="app">
<h1 class="app-title">ToDo List:</h1>
<div class="app-container">
<div class="app-inner">
<input
type="text"
class="input-text"
id="input-box"
placeholder="Save your note:"
/>
<button class="primary-btn" id="btnCreateList">Add</button>
</div>
</div>
<div class="list-outer">
<div id="list-container"></div>
</div>
</div>
</div>
<script type="module" src="./src/js/main.js"></script>
</body>
</html>
import { list } from "postcss";
import "../css/style.css";
import { darkModeHandle } from "./utils";
darkModeHandle();
const btnFunc = document.getElementById("btnCreateList");
btnFunc.addEventListener("click", () => {
let inputText = document.getElementById("input-box").value;
if (inputText.trim() === "") {
alert("Write a text");
return;
} else {
const checkBoxContainer = document.getElementById("list-container");
const checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.classList.add("checkbox-auth");
const label = document.createElement("label");
label.textContent = inputText;
label.classList.add("checkbox-auth-text");
checkBox.addEventListener("change", () => {
if (checkBox.checked) {
label.classList.add("checked");
} else {
label.classList.remove("checked");
}
});
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "❌";
deleteBtn.classList.add("delete-btn");
deleteBtn.addEventListener("click", () => {
checkBox.remove();
label.remove();
deleteBtn.remove();
br.remove();
});
const br = document.createElement("br");
checkBoxContainer.append(checkBox);
checkBoxContainer.append(label);
checkBoxContainer.append(deleteBtn);
checkBoxContainer.append(br);
document.getElementById("input-box").value = "";
}
});
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: Monserat;
font-weight: 700;
font-style: normal;
src: url("../../public/fonts/monserat/AzeretMono[wght].ttf")
format("opentype");
}
html {
font-family: Monserat, sistem-ui, sans-serif;
}
}
@layer components {
#container {
@apply h-screen dark:text-white dark:bg-zinc-800 overflow-x-hidden overflow-y-auto;
}
#app {
@apply flex flex-col items-center mt-20;
}
#list-container {
@apply w-full mt-3 border-2 p-2 bg-zinc-700 rounded-md;
}
.list-outer {
@apply w-6/12;
}
.checkbox-auth-text {
@apply text-2xl overflow-hidden overflow-ellipsis whitespace-nowrap;
}
.checkbox-auth {
@apply h-4 w-4 mr-2;
}
.checked {
@apply line-through decoration-orange-300 text-orange-300;
}
.delete-btn {
@apply inline-flex float-right mt-1;
}
.darkMode {
@apply absolute top-5 right-5;
}
.darkModeText {
@apply text-xl;
}
.app-title {
@apply text-3xl;
}
.app-container {
@apply w-full h-full justify-center items-center flex;
}
.app-inner {
@apply flex mt-5 w-6/12 justify-between;
}
.primary-btn {
@apply py-3 px-12 ml-2 flex text-2xl bg-stone-400 hover:bg-stone-500 text-black dark:bg-orange-600 dark:hover:bg-orange-700 ease-in-out duration-300 dark:text-white rounded-md;
}
.input-text {
@apply py-3 pl-7 text-black border-black dark:text-white text-2xl rounded-md bg-transparent flex-1 dark:border-white border-2;
}
}
使用“overflow:scroll”可以吗？