Как задать длину параграфа в CSS, чтобы она определялась его содержимым?

Question

uf0hn @uf0hn

CSS

Как задать длину параграфа в CSS, чтобы она определялась его содержимым?

Здравствуйте! Пишу вот такой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>
<p style="width:auto; background-color:yellow;">sftdfgh</p>
</body>
</html>

И ожидаю получить что-то в таком духе (окрашенные буквы):

А получается вот так (фон растягивается на всю длину экрана):

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

Вопрос задан более трёх лет назад
1355 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

1 комментарий

uf0hn @uf0hn Автор вопроса

Спасибо, помогло!

Сработал такой вариант:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>
<p style="display: inline-block; width:auto; background-color:yellow;">sftdfgh</p>
</body>
</html>

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ответы на вопрос 1

2 комментария

uf0hn @uf0hn Автор вопроса

span я уже пробовал раньше - почему-то он не сработал. Уж не знаю, почему. Может, потому что свойства css для span я описывал в отдельном файле, а span был вложен в div-блок и раздвигался до его пределов. Впрочем, тот пример я уже стер и не помню, как там было, а в рассматриваемом примере он действительно работает. Но замечу, что меня интересовало именно общее решение данной задачи. И не обязательно для p, а, например, и для h1, h2, ... Тэг p - просто как вариант.

Написано более трёх лет назад
Pavstyuk @Pavstyuk
Если бы я делал, что-то такое я бы создал класс для текста с фоном и всякий раз, при необходимости, в любом блочном теге вставлял span с этим классом, не разрушая изначальный замысел HTML. И не потребовалось бы каждый раз переопределять блочный элемент в строчный.

span.backlight-1 { backcgound-color: PaleGoldenrod; } span.backlight-2 { backcgound-color: LightBlue; }

<h1><span class="backlight-1">Выделенный</span> текст </h1> <p>Еще один <span class="backlight-1">выделенный</span> текст </p> <div><span class="backlight-1">Этот текст выделен желтым</span>, а <span class="backlight-2">этот</span> другим цветом</div>
Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- 2 часа назад
- 27 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- 6 часов назад
- 23 просмотра
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- вчера
- 78 просмотров
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- вчера
- 414 просмотров
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- 02 мая
- 182 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 69 просмотров
0

ответов
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 01 мая
- 115 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 01 мая
- 131 просмотр
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 98 просмотров
0

ответов
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- 30 апр.
- 76 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Frontend разработчик

Базис-Центр • Коломна

от 30 000 до 70 000 ₽

Установка OS debian 11, raid 5, raid 0

04 мая 2024, в 22:32

2000 руб./за проект

Создание базовой механики Unreal Engine 5

04 мая 2024, в 22:10

2001 руб./за проект

Разработать телеграм бота

04 мая 2024, в 21:12

10000 руб./за проект

Answer 1 · 2019-12-01 16:45:35

WapSter @wapster92 Куратор тега CSS

display: inline-block;

Ответ написан более трёх лет назад

1 комментарий

Answer 2 · 2019-12-01 16:46:48

oink @oink

Профессиональный веб-макакинг

Попробуйте
display: inline;
для тега p

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2019-12-01 20:59:16

Оберните нужный текст в span и присвойте необходимые стили. Параграф p - блочный элемент, который имеет ширину по умолчанию 100%, span по умолчанию строчный элемент имеет ширину своего контента.

Как задать длину параграфа в CSS, чтобы она определялась его содержимым?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт