如果标题也断行，则行内块标题后的文本会断行答案

【问题标题】：Text after inline-block heading breaks lines if the heading also broke lines如果标题也断行，则行内块标题后的文本会断行
【发布时间】：2016-06-29 07:29:34
【问题描述】：

我目前正在为一家在线商店制作产品页面。产品的标题和体积应在同一行，标题为<h3>，体积为静音文本。我解决了我的<h3> 标题为display: inline-block 之后的换行问题。

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

这是一个例子：

标题测试产品 750ml

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

我想要什么：

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

我的代码：

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

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

【问题讨论】：

你想在同一行测试产品750ml吗？
是的，这正是我想要的
您可以将h3 更改为display: inline。如果您需要h3 中的display: inline-block，最简单的方法是将spans 移到h3 中

标签： html css inline line-breaks heading

【解决方案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。甚至没有想过它会破坏换行符。感谢您的提醒！