限制空间文本可以占用 div答案

【问题标题】：Restricting space text can take up in a div限制空间文本可以占用 div
【发布时间】：2018-10-26 20:45:18
【问题描述】：

我正在制作一个名为“AngularJS 白板”的程序。简单来说，就是从文本框里取出文本，实时打印在一张白板的图片上，也就是div的背景图片。

我发现通过更改 div 高度可以更改图片的显示量。但是，我似乎无法使用宽度来包含添加的文本，因此它不会位于白板图片的右侧。它只是无限期地保持水平打印。

有没有办法限制文本水平移动的距离，然后让它中断到下一行？而且，最好是垂直的？

      #whiteboard 
    {
    	font-family: cursive;
    	font-size: 24px;
    	background-image: url('whiteboard_pic.png');
    	background-repeat: no-repeat;
    	padding: 25px;
    	height: 700px;
    	width: 1000px;
    }
    
    span {
    	margin-left: 24px;
    }

 <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    
    
    <title>AngularJS Whiteboard</title>
    </head>
    
    <body>
    
    <div ng-app="">
     
    
    
    <textarea name="message" rows="10" cols="30" ng-model="writing">
    </textarea>
    <span>    Marker color: <input type = "text" size = "7" ng-model="marker_color"></span>
    <span>    Writing size: <input type = "text" size = "7" ng-model="writing_size"></span>
    
    <br>
    <br>
    
    <div id = "whiteboard" ng-bind="writing" ng-style="{ color : marker_color, 'font-size': writing_size + 'px'}">	
    	
    </div>
    
    
    </div>
    
    </body>
    </html>

【问题讨论】：

标签： html css angularjs text styles

【解决方案1】：

让您的应用程序返回具有特定尺寸的块项目容器元素内的值。这将允许您控制输出文本的中断位置以及何时显示水平滚动条。

示例：

.output {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

&lt;div class="output"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sem lectus, tempor sit amet ullamcorper quis, sodales rutrum nibh. Cras erat leo, viverra ut velit vel, venenatis pharetra mauris. Nam ultricies ac lorem a mollis. Ut dapibus massa nunc, eu lacinia ligula elementum eu. Mauris consequat dolor diam, eget commodo eros vulputate id. Cras a sollicitudin tortor. Donec diam turpis, pharetra vestibulum porta et, venenatis ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia luctus suscipit. Donec in facilisis ex.&lt;/div&gt;

调整宽度和高度以适合您所需的尺寸。您可能需要将此元素相对放置在白板上。

【讨论】：