Question

我正在制作一个名为“ 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>

Answer 1

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

示例：

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

<div class="output">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.</div>

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

限制空格文字可在div中占用

1 个答案: