Html 将不适合页面的文本换行，而不是将其移动到其他页面下方

我正在尝试在标题中放置元素。我想有3个元素内联-按钮，图像和简单的文本。标题的高度应等于图像的高度。所有元素应垂直居中。这是我的HTML：

    <div class="btn">
        ...
    </div>
    <img src="image.jpg">
    <span style="float:none; display: inline-block; vertical-align: middle">lorem ipsum lorem ipsum</span>

...
同侧视野同侧视野

在图像“a”上，我呈现预期的行为。在图像“b”和“c”上显示了我的结果。 因此，预期的结果是，如果文本不适合页面，则将其换行。但它仍然应该是正确的

图例：

• 红色矩形按钮

• 橙色矩形-图像

有人知道我应该使用什么样式吗？

您应该制作：

显示：内联块

下面是一个非常简单的演示：

HTML:

---

另一种方式。

HTML:

---

试着给你的跨度一个宽度。这将迫使您的“a”示例中的换行符

HTML

---

您是否尝试过使用javascript

if语句将
文本对齐
更改为
文本对齐：右
？我想使用不带javascript的纯HTML/CSS来根据某些内容更改样式宽度需要javascript或媒体查询（即CSS）。您的示例不适用于长文本。如果将“lorem ipsum lorem ipsum”替换为更长的文本，则它将移动到按钮和图像下：然后将宽度（或最大宽度，如果您愿意）添加到span元素。。。这是更好的，但我想调整跨度的宽度自动剩余的空间。因此，如果文本有600px，那么我希望的
span
width=600px；如果页面更窄，文本只剩下200px，我希望宽度为span=200px。只有设置按钮的宽度和高度，它才能工作。在另一种情况下，按钮将扩展以覆盖整个单元。以下代码工作正常：。谢谢你的帮助！是否可以在不指定
span
元素宽度的情况下执行此操作？我想将
span
宽度自动调整为页眉中的剩余空间。这是我的主要问题。嗯，这是你想要的吗？我的意思是，它仍然很混乱，但我不知道它是否更接近你想要的，这很好，但你的例子需要填充值。我不知道图像的大小，所以我不知道应该设置什么填充。
<div class="row">
    <div class="btn">...</div>
    <img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> 
    <span>lorem ipsum<br/> lorem ipsum</span>
</div>

* {
    margin: 0;
    padding: 0;
}
.row > * {
    display: inline-block;
    vertical-align: middle;
}
.btn {
    width: 30px;
    height: 30px;
    background-color: red;
}

<div class="row">
    <div class="btn">...</div>
    <img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> <span>lorem ipsum<br/> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</div>

* {
    margin: 0;
    padding: 0;
}
.row > * {
    display: table-cell;
    vertical-align: middle;
}
.btn {
    width: 30px;
    height: 30p;
    background-color: red;
}

.row { display: table-row; }

<div class="header">
    <div class="btn">BUTTON</div>
    <img src="http://lorempixel.com/200/200" /><span>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>

</div>

.header {
    width: 500px;
    background: dimgrey;
}
.btn, img, span {
    display:inline-block;
    vertical-align: middle;
}
span {
    width:200px;
    text-align: center;
}