как избежать новой строки с тегом p?

105

Как я могу оставаться на одной строке при работе с тегом?

html css tags

— Джош
источник

хотите создать карусель с изображением и текстом

— Джош

19

@Nishant: Затем с помощью, скажем, . предназначен для абзацев.

— Стив Харрисон,

6

@Nishant: Когда вам нужно заставить тег вести себя определенным образом (например, сделать его display: inline;вместо display: block;), это хороший признак того, что вы, возможно, используете неправильный тег ...

— Стив Харрисон

173

Используйте display: inlineсвойство CSS.

Идеально: В таблице стилей:

#container p { display: inline }

Плохая / экстремальная ситуация: Встроенный:

<p style="display:inline">...</p>

— Дуг Найнер
источник

12

Правильный CSS, но ребята в исходных комментариях к вопросу правы ... спросите себя, зачем вы это делаете ... SPANкажется, лучше подходит для этой ситуации.

— one.beat.consumer

5

Промежуток такой же и не переходит на новую строку! как one.beat.consumerсказано

— Anicho

+1 Полезно для экономии места на мобильных устройствах с помощью

— адаптивных

Я работаю в angularJS, и мне нужно было повторить абзац с помощью ng-repeat, это отлично сработало. И Span только выдал мне ошибку.

— sch

Это может понадобиться при работе с программой, вывод которой использует теги в качестве разделителей. Например, формы Django.

— Джим Пол,

69

Этот тег предназначен для указания абзацев текста. Если вы не хотите, чтобы текст начинался с новой строки, я бы посоветовал вам использовать тег неправильно. Возможно, метка более точно соответствует тому, чего вы хотите достичь ...?

— Стив Харрисон
источник

1

Это должен быть принятый ответ. Нет прямого ответа на вопрос, но, вероятно, лучшее решение проблемы.

— Fr4nc3sc0NL

19

Я наткнулся на это для css

span, p{overflow:hidden; white-space: nowrap;}

через аналогичный вопрос о стеке

— акушив
источник

1

Мне переполнение не понадобилось: скрыто. Спасибо

— StinkyCat

5

что-то вроде:

p
{
    display:inline;
}

в вашей таблице стилей будет делать это для всех тегов p.

— Джон Бокер
источник

2

Flexbox работает.

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items:center;
  border:1px solid #e3f2fd;
}
.item{
  flex: 1 1 auto;
  border:1px solid #ffebee;
}

<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
</div>

Развернуть фрагмент

— Ронни Ройстон
источник