Есть несколько способов оформить текст так, чтобы он переносился на две строки и обводил контуром:
1. Использование тега <div> с CSS свойствами для создания рамки и переноса на две строки:
```html
<div style="border: 1px solid black; width: 200px; word-wrap: break-word;">
Ваш текст здесь
</div>
```
2. Использование CSS класса с соответствующими свойствами:
```html
<style>
.bordered-text {
border: 1px solid black;
width: 200px;
word-wrap: break-word;
}
</style>
<div class="bordered-text">
Ваш текст здесь
</div>
```
Чтобы ограничить рамку только текстом при изменении размера экрана, можно использовать относительные единицы измерения для задания ширины рамки, например, проценты (%). Также можно применить медиа-запросы для адаптивного изменения стилей при изменении размера экрана:
```css
@media only screen and (max-width: 600px) {
.bordered-text {
width: 80%; /* примерная ширина рамки при маленьком экране */
}
}
```
Таким образом, текст будет переноситься на вторую строку, а рамка будет ограничивать только его.