С учетом следующей семантической разметки:
<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Я бы хотел, чтобы заголовок был встроен в абзац, например:
СФЕРА РАБОТЫ. Lorem ipsum dolor sit amet, концертный адептисинг
elit, sed do eiusmod tempor incididunt
Утробная работа и долоре Великой Аликва.
Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi
аликип от бывшего коммандо.
Вариант 1: всплыть в заголовке.
Это работает, пока заголовок помещается на одной строке. Если этого не происходит, плавающий элемент образует широкий блок, поэтому абзац начинается справа от блока или ниже, вместо продолжения в строке:
| SCOPE OF | Lorem |
| WORK | ipsum |
| sit amet, consect|
Вариант 2: показывать оба элемента в строке.
Может работать правило стиля, например: h3, h3+* {display: inline;}. Это предполагает, что им предшествуют и следуют другие элементы блока. В противном случае другие встроенные элементы будут перетекать в них. Кроме того, соседний селектор (+) доступен не во всех браузерах.
Вариант 3?
Без добавления ненужных классов или элементов-оберток и сохранения их правильности и семантики (без span.h3 внутри абзаца!), Есть ли лучший способ сделать эту простую вещь?