Как задать длину параграфа в 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>

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

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

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

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

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

Подписаться 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>
Написано более трёх лет назад

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 151 просмотр
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 97 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 86 просмотров
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 59 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 102 просмотра
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Разработка лэндинга-визитки для юридической компании

25 нояб. 2024, в 11:40

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

Сделать интеграцию amoCRM + Яндекс.Метрика по API

25 нояб. 2024, в 11:09

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

Разработка бота рассылок в Telegram

25 нояб. 2024, в 10:16

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

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, чтобы она определялась его содержимым?

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

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

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