phpjshtmlcssblog

Как сделать бордер по ширине текста

Мы говорим : бордер по ширине текста, но даже и не пытаемся задуматься..., где мы каждый раз встречаем бордюр и он распространяется на всю ширину текста и не продолжается далее... может стоит посмотреть на этот объект повнимательнее!?

Подробнее о бордюре на всю ширину текста:

1. Пример - с бордюром больше чем текст...
2. Пример текста на ширину текста по умолчанию
3. Второй пример бордюра на ширину текста

Скопировать ссылку



Пример - с бордюром больше чем текст...

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


т.е. бордюр будет больше чем тест на много!!!

Бордюр больше текста:

бордер больше ширины текста

Далее рассмотрим из чего данный пример состоит...

Простой пример, для этого нам понадобится:

Пусть это будет блок div.

+ класс + название класса(example)

Html:

<div class=example>бордер больше ширины текста</div>

Далее нам нужен css:

класс(.example) внутри... тега style

Используем тег style

Добавим border

+ нужно добавить position bottom...

Толщина 1px(единицы измерения)

Начертание линии : solid

Цвет ... пусть будет яркий... (red)

Css:

<style>

.example {

border-bottom: 1px solid red;

}

</style>

Скопировать ссылку



Пример текста на ширину текста по умолчанию

В предыдущем пункте я разобрал по косточкам строение кода с бордюром больше чем текст...

А теперь давайте вернемся к блоку у котрого...

бордер автоматически только на ширину текста

Догадались и чем идет речь?

Это ссылка! Пример текста на ширину текста по умолчанию

А как узнать свойства по умолчанию? Не буду останавливаться на этом... я искал свойства ссылки, сразу перейдем к результату, что нам нужно...:
display : inline

Другими словами... если мы применим к примеру из первого пункта, то мы получим бордюр на ширину текста... смотрим:

Css:

.example2 {

border-bottom: 1px solid red;

display: inline;

}

Html:

<div class=example2>Бордюр на ширину текста:</div>

Бордюр на ширину текста:

Бордюр на ширину текста:

Т.е мы превратили "display: block;" в "display: inline;"... а если это нам важно сохранить? тогда как...?

Скопировать ссылку



Второй пример бордюра на ширину текста

Как Вы увидели в предпоследних строчках... а если нам важно, чтобы "display: block;" сохранился...? давайте посмотрим на пример с использование заголовка...написаного в одну строку...

Другой текст <h6 class=example2>Бордюр на ширину текста:</h6> здесь другой текст

Выведем прямо здесь...

Бордюр на ширину текста:

Другой текст
Бордюр на ширину текста:
здесь другой текст

Что вы видите? Что вместо того, чтобы занять всю ширину поля заголовок выстроился в строчку...


Но если мы вернем самый первый стиль(example), то получим самый первый вариант... когда все блоки срабатывают по умолчанию.

Другой текст <h6 class=example>Бордюр на ширину текста:</h6> здесь другой текст
Другой текст
Бордюр на ширину текста:
здесь другой текст

Что делать?

Добавим span ... обернем наш текст в заголовке + класс "example"(он у нас отвечает только за бордюр...)

Hmtl:

Другой текст <h6><span class=example>Бордюр на ширину текста:</span></h6> здесь другой текст

Css:

<style>

.example {

border-bottom: 1px solid red;

}

</style>

Мы опять получили, что хотели:

Текст с бордюром одинаковой ширины!

Другой текст
Бордюр на ширину текста:
здесь другой текст

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...