Olá.
Ao incluirmos as tarefas muito extensas com muitos caracteres, as li ultrapassam os limites da div, com parte do texto e dos botões lançados para fora do plano de fundo.
Como podemos limitar isso e realizar uma quebra de linha automática?
Solucionado
Olá.
Ao incluirmos as tarefas muito extensas com muitos caracteres, as li ultrapassam os limites da div, com parte do texto e dos botões lançados para fora do plano de fundo.
Como podemos limitar isso e realizar uma quebra de linha automática?
Oi, Rogério, tudo bem?
Estilizando o css podemos mudar esse comportamento. Na classe .task, você pode colocar um max-width de 35rem e limitar que essa caixa cresça para os lados, assim como nesse teste que fiz: https://imgur.com/a/p00d4Z6
Olá, Laís...
Não sei qual foi a sua mágica, mas no meu código não bastou colocar o max-width na classe .task, no CSS.
Segues abaixo meus códigos...
CSS
body {
margin: 0;
}
.app {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
min-height: 100vh;
}
.todo-list {
background-color: #0B2027;
font-family: "Space Mono", monospace;
padding: 1rem;
min-width: 400px;
min-height: 300px;
}
.title {
border-bottom: 1px solid rgba(246, 241, 209, 0.5);
font-size: 1.5rem;
font-family: "BioRhyme", serif;
color: #F6F1D1;
}
.form {
display: flex;
justify-content: center;
}
.form-input,
.form-button {
border-radius: 0;
padding: 0.75rem;
font-size: 0.75rem;
}
.form-input {
outline: none;
background-color: #F6F1D1;
border-color: rgba(255, 255, 255, 0.1);
}
.form-button {
border: 1px;
background: #F6F1D1;
text-transform: uppercase;
cursor: pointer;
margin-left: 0.25rem;
}
.form-button:hover {
color: #F6F1D1;
background: rgba(246, 241, 209, 0.1);
}
.list {
padding: 0;
list-style: none;
width: 100%;
}
.task {
background-color: rgba(255, 255, 255, 0.1);
color: #F6F1D1;
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
padding: 1rem 3rem;
max-width: 35rem;
}
.check-button, .delete-button {
background-color: #F6F1D1;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
outline: none;
border-radius: 2px;
cursor: pointer;
}
.task.done .check-button {
background-color: #46494C;
color: #F6F1D1;
}
.check-icon {
display: block;
padding: 1px;
width: 10px;
height: 10px;
background-color: transparent;
border-radius: 50%;
}
.task.done .check-icon {
background-color: #0B2027;
}
.content {
margin: 0;
}
.task.done .content {
text-decoration: line-through;
}index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Space+Mono&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Tarefas</title>
</head>
<body>
<div class="app">
<div class="todo-list">
<h1 class="title">
Lista de tarefas
</h1>
<form class="form" action="">
<input class="form-input" type="text" data-form-input>
<button class="form-button" data-form-button> Incluir </button>
</form>
<ul class="list" data-list>
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>main.js
(() => {
// import BotaoConcluir from './componentes/concluirTarefa.js';
// import BotaoDeletar from './componentes/deletarTarefa.js';
const criarTarefa = (evento) => {
evento.preventDefault();
const input = document.querySelector('[data-form-input]');
const valor = input.value;
if (input.value != "") {
const lista = document.querySelector('[data-list]');
const tarefa = document.createElement('li');
tarefa.classList.add('task');
const conteudo = `<p class="content">${valor}</p>`;
tarefa.innerHTML = conteudo;
tarefa.appendChild(BotaoConcluir());
tarefa.appendChild(BotaoDeletar());
lista.appendChild(tarefa);
input.value = "";
}else{
alert("Digite uma tarefa !");
}
};
const novaTarefa = document.querySelector('[data-form-button]');
novaTarefa.addEventListener('click', criarTarefa);
const BotaoConcluir = () =>{
const botaoConcluir = document.createElement('button');
botaoConcluir.classList.add('check-button');
botaoConcluir.innerText = 'CONCLUIR';
botaoConcluir.addEventListener('click', concluirTarefa);
return botaoConcluir;
};
const concluirTarefa = (evento) =>{
const btnConcluir = evento.target;
const tarefaCompleta = btnConcluir.parentElement;
tarefaCompleta.classList.toggle('done');
};
const BotaoDeletar = () =>{
const botaoDeletar = document.createElement('button');
botaoDeletar.innerText = 'DELETAR';
botaoDeletar.addEventListener('click', deletarTarefa);
return botaoDeletar;
};
const deletarTarefa = (evento) => {
const botaoDeletar = evento.target;
const tarefaCompleta = botaoDeletar.parentElement;
tarefaCompleta.remove();
console.log("Item deletado");
return botaoDeletar;
}
})();Se mais alguém puder analisar... Obrigado.
Oi, Rogerio, tudo bem?
Testei o seu código e caixa diminuiu. Se puder mostrar como fica quando você testa aí, dando um print, pode postar pelo https://imgur.com/
Aguardo :}
Olá, Laís.
Não acredito !!! kkk
Copiei esses códigos que postei, criei um novo projeto e não funcionou!!!
Segue o link do imgur: https://imgur.com/a/UKMV5uA .
Oi, Rogério.
Você já tentou testar com uma tarefa que seja um texto corrido? Como esse aqui que testei: https://imgur.com/a/wHpuE5V Acredito que a forma como está fazendo, o layout está entendendo como uma palavra e ultrapassando o contexto.
Olá, Laís.
Bingo!!!
Era exatamente isso. Eu estava usando um monte de letras repetidas sem espaço e a interface estava reconhecendo como uma única palavra e não quebrava linha! Muito obrigado pela atenção dispensada!!!