Ограничение пространства текста может занять в div - PullRequest
Новая
       5

Ограничение пространства текста может занять в div

0 голосов
/ 26 октября 2018

Я делаю программу под названием AngularJS whiteboard. Проще говоря, он берет текст из текстового поля и печатает его в режиме реального времени на изображении доски, которое является фоновым изображением для 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>

1 Ответ

0 голосов
/ 26 октября 2018

Попросите ваше приложение вернуть значения внутри элемента контейнера элемента блока, который имеет определенные размеры.Это позволит вам контролировать, где разрывается выводимый текст и когда должна отображаться горизонтальная полоса прокрутки.

Пример: 

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

Отрегулируйте ширину и высоту в соответствии с желаемыми размерами.Возможно, вам придется расположить этот элемент относительно вашей доски.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...