Как внутри flex для тега a задать inline?

Question

[Анатолий]

Как сделать, чтобы для:

p { max-width: 600px; display: flex; }
<p>Далеко-далеко за словесными горами в стране. <a href="site.ru">Site.ru</a>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>

ссылка site.ru не переносилась на новую строку как display: block?
Использовать можно только стили, без исправления html и добавления javascript.

------------
Дописал пример: https://codepen.io/workcode/pen/GbKPJG а то народ не понимает, что происходит ((

Comments

[Владимир Ионенко]

А для чего p display: flex ?
Можно добавить для p flex-wrap: wrap; Таким образом ссылка не будет переноситься на новую строку. Но всю что идет после, будет на новой строке

[Анатолий]

сейчас пример выложу на codepen, видимо не понятно написано

[Ankhena]

Поясните, пожалуйста, для чего тут нужен флекс.

[Анатолий]

в вопросе дописал ссылку на полный пример

[Сергей delphinpro]

Присоединяюсь к вопросу (из чистого любопытства) - нафига же там flex???

[Ankhena]

Анатолий, Ответьте на вопрос: зачем p флекс?

[Анатолий]

Сергей delphinpro, для выравнивания

[Сергей delphinpro]

Анатолий, выравнивания чего?
Использовать тег параграфа для раскладки — это моветон.

Стоит рассмотреть вариант выравнивания самого параграфа, а не его содержимого.

[Анатолий]

Сергей delphinpro, Вы все равно предлагаете обертку, что <p></span></p>, что <div><p></div> это я не знаю как сделать!
Могу раскрыть пример еще шире. В Wordpress в редакторе добавлены кастом форматы для оформления. Редактор используется TinyMCE. Так вот там для формата можно задать обертку, можно div можно p, и содержимое будет в этом контейнере. Но нельзя добавить контейнер в контейнере. Могу конечно рабочий кусок сюда закинуть, но я думаю тут мало кто в этом разбирается.

[Сергей delphinpro]

Анатолий, Я уже понял, что это пользовательский контент.
Но по-хорошему, это так не делается.
Если подобные блоки нужно наполнять через админку, то для них не tinyMCE делается, а пилится кастомное поле для заполнения отдельных компонентов, в данном случае картинка + текст.
И уже эти поля вставляются в шаблон.

[Rustam Bainazarov]

Сергей delphinpro, во-во, золотые слова.

[Анатолий]

Сергей delphinpro, можно пример?

[Ankhena]

Сменить tinyMCE на CKeditor, если у первого нет настроек.

Еще есть списки, в li он позволяет вкладывать p или div?

Answer 1

[Михаил]

p { max-width: 600px; display: flex; white-space: nowrap }

тут даже если текст будет длиннее чем 600 px, он не будет переноситься

Comments

[Анатолий]

Вы наверно не поняли вопрос, там структура такая:

<p>
Тескст<a></a>Текст
</p>

То что Вы написали, совсем не на эту тему.