Как я не могу разбить мой текст HTML, когда не хватает места для текста
Извините за запутанный заголовок, но я не знал, как это спросить.
В основном у меня есть название напитка и количество напитка рядом с ним, вот так.
Orange Juice ( 20 LT )
Я действительно использую PHP для вывода информации, но это код, который сделает это возможным:
<h6><?php the_title(); ?> <span> ( <?php the_field('quantity'); ?> )</span></h6>
Я пытался использовать HTML-код пространства, но, похоже, не работает
Таким образом, проблема в том, когда экран маленький, и не хватает места количество ( 20 LT ) перейдем к следующей строке, но НЕ ко всему количеству, а просто так:
Orange Juice ( 20
LT )
как я могу сделать так, чтобы, если не хватило места для вывода количества, перенести все количество на следующую строку, а не только ее часть.
Это означает, что если бы не было достаточно места, это выглядело бы так:
Orange Juice
( 20 LT )
а также не только снизить часть количества, но все это.
Решение
Попробуй добавить display: inline-block в промежуток, как это:
<h6><?php the_title(); ?> <span style="display: inline-block;"> ( <?php the_field('quantity'); ?> )</span></h6>
Другие решения
Отдай свое <span> имя класса как <span class="nowrap"> и добавьте это в свой CSS
.nowrap {
white-space: nowrap;
}
Вы можете использовать обычные промежутки не внутри этого промежутка.