Как сделать что бы border не растягивался на всю страницу а только шёл до последней буквы?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pyatigorsk</title> </head> <body> <h2 style="font-family:cursive;text-align: center;background-color:antiquewhite;">Гора Машук<br>г.Пятигорск</h2> <h3 style="font-family:sans-serif;">Описание горы</h3> <p style="border: 3px solid;">Машук - останцовая гора-лакколит магматического происхождения, расположенная в Ставропольском крае на Кавказских Минеральных Водах.<br>Находится в северо-восточной части города Пятигорска. </p> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pyatigorsk</title> </head> <body> <h2 style="font-family:cursive;text-align: center;background-color:antiquewhite;">Гора Машук<br>г.Пятигорск</h2> <h3 style="font-family:sans-serif;">Описание горы</h3> <p style="border: 3px solid;">Машук - останцовая гора-лакколит магматического происхождения, расположенная в Ставропольском крае на Кавказских Минеральных Водах.<br>Находится в северо-восточной части города Пятигорска. </p> </body> </html>
Дополнительно:
Например так snippet
Для блока надо задать display: inline-block;, но лучше это делать не для p, а для вложенного span.
P.S. По совету Ankhena еще можно оставить p стандартный display и задать width:fit-content. Это второй параграф в примере.
- Можно удалить ненужный спан, оставить блочность параграфу и задать ширину fit-content.
Но держаться всё это будет только при наличии br - Ankhena, добавил второй вариант
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы задать границу (border) элементу так, чтобы она не растягивалась на всю страницу, можно использовать свойство display с значением inline-block для элемента, к которому применяется граница. Это позволит задать границу только вокруг содержимого элемента, а не на всю ширину страницы.
Пример кода на языке PHP:
.bordered { display: inline-block; border: 1px solid black; padding: 5px; } <div class="bordered"> Ваш текст или содержимое элемента </div>.bordered { display: inline-block; border: 1px solid black; padding: 5px; } <div class="bordered"> Ваш текст или содержимое элемента </div>
В данном примере создается стиль с классом "bordered", который применяется к элементу div. Свойство display: inline-block делает элемент блочным, но при этом сохраняет его строчный характер, позволяя границе ограничивать только содержимое элемента.
Таким образом, граница будет ограничивать только содержимое элемента до последней буквы, а не растягиваться на всю страницу. Вам нужно просто применить этот стиль к нужному элементу вашего сайта.