如何修复超出容器的文本

问题描述 投票:0回答:1

我正在使用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显示了该文本,但是它超出了容器。 ...

javascript css
1个回答
0
投票

您可以使用如下所示的word-break: break-wordword-break: break-all轻松地使句子中断。

© www.soinside.com 2019 - 2024. All rights reserved.