I need to make the big text to stay within the div and if it like touches the side of the div, it goes to the next line and at the end of this big text must be a cross
<!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;
}
}