Search code examples
htmlcssinlineline-breaksheading

Text after inline-block heading breaks lines if the heading also broke lines

I'm currently working on a product page for an online-shop. The title and the volume of the products are meant to be in one line with the title being a <h3> and the volume being a muted text. I fixed the problem with the line breaks after my <h3> headings with display: inline-block.

On your average desktop my code works just fine. However if the title is exceptionally long or the device you are viewing the website on is particularly narrow, causing the heading to break lines, the volume text is displayed one line below.

Here is an example:

Headline Test Product 750ml

Headline Test Product Headline
Test Product
750ml

What I want:

Headline Test Product Headline
Test Product 750ml

my code:

<h3 class="name" style="display: inline-block">{{ product.title }}</h3>
{% if (product.volume >= 1) %}
    <span class="volume text-muted">{{ product.volume|number_format(1, ',', '.') }}l</span>
{% else %}
    <span class="volume text-muted">{{ (product.volume * 1000)|number_format(0, ',', '.') }}ml</span>
{% endif %}

I know my english isn't perfect, but I hope you still understand my problem.

Solution

  • Use display: inline:

    <h3 style="display: inline">Headline Test Product Headline 
Test Product Headline Test Product Headline 
Test Product</h3>
<span>750ml</span>