Javascript 如何修复超出容器的文本
我正在使用javascript、css和html做一个待办事项列表练习。发生的事情是,我注意到,当我引入一个长文本时,生成的li显示文本,但它超出了容器。Javascript 如何修复超出容器的文本,javascript,css,Javascript,Css,我正在使用javascript、css和html做一个待办事项列表练习。发生的事情是,我注意到,当我引入一个长文本时,生成的li显示文本,但它超出了容器。 HTML JS 我想要的是显示列表,当它们达到容器的定义大小时,将行打断为第二行。不要离开容器您可以使用下面的分词:分词或分词:全部分词轻松地分句 .wrapper{ 宽度:150px; 背景:绿色; 断字:断字; } 敏捷的棕色狐狸跳过了懒狗 设置li的宽度,因为测试文本不包含空格,所以需要使用 <div class="pare
HTML JS
我想要的是显示列表,当它们达到容器的定义大小时,将行打断为第二行。不要离开容器您可以使用下面的
分词:分词
或分词:全部分词
轻松地分句
.wrapper{
宽度:150px;
背景:绿色;
断字:断字;
}
敏捷的棕色狐狸跳过了懒狗
设置li的宽度,因为测试文本不包含空格,所以需要使用
<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>
*,
*: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;
}
(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)
}
})()