如果标题也断行，inline-block 标题后的文本会断行

Question

我目前正在为 online-shop 制作产品页面。产品的标题和音量应该在一行中，标题是 <h3>，音量是静音文本。我用 display: inline-block.

修复了 <h3> 标题后的换行符问题

在您的普通桌面上，我的代码运行良好。但是，如果标题特别长或您正在查看网站的设备特别窄，导致标题断行，则卷文本显示在下方一行。

这是一个例子：

头条测试品750ml

标题测试产品标题
测试产品
750毫升

我想要的：

标题测试产品标题
测试产品 750毫升

我的代码：

<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 %}

我知道我的英语不完美，但我希望你仍然理解我的问题。

Answer 1

使用display: inline:

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

如果标题也断行，inline-block 标题后的文本会断行

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

html

css

inline

line-breaks

heading