时间戳

首页 > 解决方案 > 限制空间文本可以占用 div

html - 限制空间文本可以占用 div

问题描述

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

标签： htmlcssangularjstextstyles

解决方案

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

例子：

.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>

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

推荐阅读