Как сделать что бы border не растягивался на всю страницу а только шёл до последней буквы?

Чтобы создать рамку (border) вокруг элемента, которая будет расширяться только до последней буквы текста в этом элементе, можно использовать свойство display со значением inline-block. При этом нужно учитывать особенности работы с рамками и элементами в HTML и CSS.

Пример реализации:

HTML:

<div class="bordered-text">Текст с рамкой до последней буквы</div>

CSS:

.bordered-text {
  display: inline-block;
  border: 1px solid black;
  padding: 5px;
}

В данном примере мы создали блок с текстом, который обернули в div с классом "bordered-text". Установив для этого блока свойство display: inline-block, мы делаем его блочным элементом, который однако не занимает всю доступную ему ширину, а только столько, сколько нужно для отображения текста до последней буквы.

Добавив рамку и отступы вокруг текста с помощью свойств border и padding, мы создаем рамку, расширяющуюся только до последней буквы текста внутри элемента. Важно помнить, что использование inline-block может приводить к некоторым особенностям в оформлении элементов на странице, поэтому стоит учитывать их при разработке интерфейса.