Finn Voigtlaender Finn Voigtlaender - 5 months ago 17
HTML Question

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.

Answer

Use display: inline:

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