Question

所以我正在制作这个闪存卡应用程序，我正在使用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;
}

Answer 1

输入类型=＆＃34;文字＆＃34;框用于单行文本。要获得所需内容，您需要使用textarea HTML标记。

HTNL textarea tag

你可以写：

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

Answer 2

根据Ted A的建议。

在.note CSS类中设置一个宽度，以便您的浏览器知道框外的＆＃34;＆＃34;手段。

还要考虑word-wrap property

如何使文本保持在div框内并在到达div框边缘时继续下一行？

2 个答案: