我正在使用javascript,css,html执行待办事项清单。发生的是,我注意到,当我引入一个长文本时,生成的li显示了该文本,但是它超出了容器。”
HTML
<div class="parent-container"> <div class="container"> <div class="text-container"> <h2 class="tilte">To Do App</h2> <h3 class="subtitle">Write here your to do´s</h3> </div> <div class="list-container"> <ul> </ul> </div> <div class="input-container"> <input class="write-todo" id="input-todo" type="text"> <button class="add-todo" id='button-todo' type="submit">Add a To Do</button> </div> </div> </div>
CSS
*, *:after, *:before{ margin:0; padding:0; box-sizing: inherit; } body{ box-sizing: border-box; font-weight:100%; } .parent-container{ height:100vh; display:flex; justify-content:center; align-items:center; } .container{ background-color:rgb(91, 213, 224); padding:2rem; width:40%; min-height:25rem; display:flex; flex-direction:column; justify-content:space-between; } .text-container{ text-align:center; font-family:sans-serif; line-height: 2rem; } h2{ font-size:2rem; color:rgb(240,128, 128); } h3{ font-size:1rem; color:rgb(12, 5, 82); } .list-container{ width:100%; display:block; background-color:lightgreen; display:flex; justify-content:center; align-items:center; } ul{ display:inline-block; width:50%; color:rgb(12, 5, 82); } .input-container{ width:100%; display:flex; justify-content:space-between; } .write-todo{ border:none; outline:transparent; padding:.8rem; width:18rem; } .add-todo{ padding:.7rem .6rem; border:#ffff; background-color:#fff; color:lightcoral; font-weight:600; letter-spacing: .1rem; font-size:1rem; }
JS
(function(){ 'use strict' const input = document.querySelector('#input-todo') const btn = document.querySelector('#button-todo') const ul = document.querySelector('ul') btn.addEventListener('click', () =>{ addTask() }) const addTask = () => { let li = document.createElement('li') let valueLi = document.createTextNode(input.value) li.appendChild(valueLi) ul.appendChild(li) } })()
我想要的是显示列表,当列表达到容器的定义大小时,将行换成第二行。而不是离开容器
我正在使用javascript,css,html执行待办事项清单。发生的是,我注意到,当我引入一个长文本时,生成的li显示了该文本,但是它超出了容器。 ...
您可以使用如下所示的word-break: break-word
或word-break: break-all
轻松地使句子中断。