Finn Voigtlaender Finn Voigtlaender - 1 year ago 75
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

and the volume being a muted text. I fixed the problem with the line breaks after my
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


What I want:

Headline Test Product Headline

Test Product

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source

Use display: inline:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download