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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!!!