Ограничение пространства текста может занимать 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>
Ответы 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>Отрегулируйте ширину и высоту в соответствии с вашими желаемыми размерами. Возможно, вам придется расположить этот элемент относительно доски.