Span разбивает текст на две части. Возможно ли это исправить.?

Question

[Please2334]

Span разбивает текст на две части. Нужно чтоб он шел одним единым тестом. Как это можно справить?

HTML

<div class="header__bottom">
                    <img class="header__bottom-img" src="images/krest.svg" alt="">
                    <div class="header__bottom-box">
                        <p class="header__bottom-text header__bottom-text--one"><span>Мы открыты и принимаем заказы до
                                21:00</span>, позвоните сейчас и мы сделаем скидку 15%</p>
                        <p class="header__bottom-text header__bottom-text--two"><span><a href="#">Получить
                                    скидку</a></span>
                        </p>
                    </div>
                </div>

CSS

.header__bottom {

    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    bottom: 25px;
    max-width: 1170px;
    width: 100%;
    background-color: #000;
    border-radius: 5px;
    padding: 15px 0px;

}

.header__bottom-img {
    padding-left: 30px;
    cursor: pointer;
}

.header__bottom-box{
    display: flex;
    justify-content: space-between;

}

Comments

[Danny Arty]

Стили не все приложили, но судя по скрину, видимо у вас для .header__bottom-text заданы свойства display:flex;align-items:center;

[Please2334]

Danny Arty, Да, действительно. Делалось для того, чтоб псевдоэлемент(картинка кружочка) стал возле текста.

Answer 1

[venomprog]

Тебе здесь для чего флекс?
спан - строка
у тебя он и не должен биться на 2 блока, убери здесь флекс
Мы открыты и принимаем заказы до
21:00, позвоните сейчас и мы сделаем скидку 15%

Когда прописываешь флекс - его элементами внутри автоматически устанавливается display: block
поэтому тебя и делится на 2 блока текст, который должен идти в одну строку.

(Решение: убери класс, который вешает флекс на этот )