为了防止文本溢出到栏外，您可以应用CSS样式来限制输入字段的宽度。下面是一个如何修改代码以解决此问题的示例：

<div id="tasks-container">
    <div id="tasks-header">
        <h2>Type your next Task:</h2>
        <form action="" id="add-task-form">
            <input type="text" id="task-title" placeholder="What do you need to do?" style="width: 200px;">
            <!-- Adjust the width value as per your requirements -->
            <button id="add-btn" type="submit">
                <ion-icon name="add-outline"></ion-icon>
            </button> 
        </form>
    </div>
    <div id="tasks-list-container">
        <h2>These are your Tasks:</h2>
        <ul id="task-list">
            <li class="task-box template hide">
                <span class="task-title"></span>
                <ion-icon class="done-btn" name="checkmark-outline"></ion-icon>
                <ion-icon class="remove-btn" name="close-outline"></ion-icon>
            </li>
        </ul>
    </div>
</div>

在上面的代码中，我向input元素添加了一个内联样式，并将其宽度设置为200像素。您可以根据所需的宽度调整此值。这将限制输入字段的宽度，并防止文本溢出到栏外。