Блог

Я использую теги span для установки разных цветов для слов в строке:

CSS:

 #some-panel{ 
display: flex; 
flex-flow: 
column wrap; 
justify-content: center; 
align-items: center; 
align-content: center; 
width: 100%; 
grid-row-start: 1;  }
  

Pug не отображает одну строку, но ставит 3 разрыва:

 div#some-panel <span id="abs">Text |</span><span style="color:#b7bdc9;"> of another</span><span style="color:#ca6782;"> color</span>
  

Я также пытался:

 div#some-panel #[span text | ] #[span(style="color:#b7bdc9;") of another] #[span(style="color:#ca6782;") color]
  

но не повезло.
Если я удалю всю гибкую часть в своем CSS, pug правильно отобразит одну строку, но у меня нет гибкого div :).
Чего мне не хватает? Спасибо

Установите flex-direction значение row , а также используйте flex-wrap: nowrap , чтобы избежать переноса.

css:

 #some-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    grid-row-start: 1;
}
  

pug:

 div#some-panel 
    span#abs Text |
    span(style="color:#b7bdc9;") of another
    span(style="color:#ca6782;") color