Блог

Главная - Вопросы по программированию - Как сделать текст в одной строке?

Как сделать текст в одной строке?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

В настоящее время у меня есть текст, который выглядит следующим образом. Я хочу, чтобы более 1600 счастливых едоков были в одной строке. Заголовок и так хорош. В настоящее время я использую flexbox, если это поможет.

введите описание изображения здесь

 .currentcitiesmaincontent {
  border: 1px solid red;
  display: inline-flex;
  width: 100%;
}  
 <div class="currentcitiesmaincontent">
  <div>
    Lisbon<br>
    <p> 1600  happy eaters</p>
  </div>
  <div>SAN Franscisco</div>
  <div>Berlin</div>
  <div>London</div>
</div>

Ответ №1:

Вы также можете установить flex макет для встроенных divs, чтобы сделать его в одной строке.

 .currentcitiesmaincontent {
  border: 1px solid red;
  display: inline-flex;
  width: 100%;
}

.currentcitiesmaincontent div {
  display: flex;
}

.currentcitiesmaincontent p {
  margin: 0;
  padding: 0;
}  
 <div class="currentcitiesmaincontent">
  <div>
    Lisbon<br>
    <p> 1600  happy eaters</p>
  </div>
  <div>SAN Franscisco</div>
  <div>Berlin</div>
  <div>London</div>
</div>

Ответ №2:

я думаю, это то, что вы ищете

 .currentcitiesmaincontent {
  border: 1px solid red;
  display: flex;
  width: 100%;
}

.currentcitiesmaincontent > div:first-child{
display : flex;
}

* {
margin : 0px;
padding: 0px;
}  
 <div class="currentcitiesmaincontent">
  <div>
    Lisbon<br>
    <p> 1600  happy eaters</p>
  </div>
  <div>SAN Franscisco</div>
  <div>Berlin</div>
  <div>London</div>
</div>

Ответ №3:

Вы должны создать класс для нужного вам абзаца white-space: nowrap; .

 p.nowrap {
    white-space: nowrap;
}  
 <p class="nowrap"> 1600  happy eaters</p>