如何使文本停留在 div 框内并在到达 div 框边缘时继续下一行？答案

【问题标题】：How to make text stay inside a div box and continue on next line when it reaches the edge of div box?如何使文本停留在 div 框内并在到达 div 框边缘时继续下一行？
【发布时间】：2019-10-23 21:32:52
【问题描述】：

所以我正在制作这个闪存卡应用程序，并且我正在使用 Angular 让用户在输入文本框中输入文本，并且文本会显示在其下方的闪存卡上。问题是当用户输入很多时，溢出的文本会移动到 div 框之外。这是我的代码。

<input type="text" ng-model="ctrl.note">

        <div class="box">
            <div class="note">{{ctrl.note}}</div>
        </div>
    </div>

CSS：

.box {
    border: solid;
    height: 300px;
    width: 600px;
    margin: 30px auto;
    border-radius: 25px;
    box-shadow: 8px 8px 10px #ccc;
}
.note {
    text-align: center;
    margin: 50px;
    font-weight: bold;
    font-size: 40px;
}

【问题讨论】：

您能否在 Question 中包含 css 的 .box 元素？
在 .note CSS 类中设置宽度。还要考虑自动换行属性：w3schools.com/cssref/css3_pr_word-wrap.asp
@oortCloud 你应该回答这个问题，这样他们才能接受:)

标签： javascript html css angularjs

【解决方案1】：

输入 type="text" 框用于单行文本。要获得您要查找的内容，您需要使用<textarea> HTML 标记。

HTML textarea tag

你可以写：

<textarea col="20" rows="5" ng-model="ctrl.note"></textarea>

【讨论】：

【解决方案2】：

按照 Ted A 的建议。

在 .note CSS 类中设置宽度，以便您的浏览器知道“框外”的含义。

还要考虑word-wrap property

【讨论】：