Css 在DIV内的第二行显示H4文本（如果文本仅占用1行）

我有以下HTML容器，其中包含一个文本：

<div class="title"><h4 class=title-text"> Titanic </h4></div>

对于

.title文本

，我添加了省略号，因此，如果文本长度超过2行，则将对其进行裁剪：

.title-text {
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: -o-ellipsis-lastline;
    font-size: 14px;
    line-height: 1em;
}

当标题文本占用两行时，此选项可以正常工作。我想实现以下目标：当标题只占用一行时，我需要在第二行显示此标题（现在它在第一行显示标题），以便它更接近它下面的下一个容器

我怎样才能做到这一点

见示例：

---

在本例中，标题有两行。如果标题短于1行，我想将其移动到第二行（因此第一行是空的，上面有空白）

如果我理解正确，我认为您可以使用flexbox实现这一点：

。标题文本{
文本对齐：左对齐；
溢出：隐藏；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit线夹：2个；
文本溢出：-o-省略号-lastline；
字体大小：14px；
线高：1米；
排名：0；
保证金：0；
左：0；
}
.头衔{
对齐项目：柔性端；
显示器：flex；
弯曲方向：行；
位置：相对位置；
最小高度：40px；
宽度：200px；
边框：1px纯红；
}
.包装纸{
高度：83px；
位置：绝对位置；
宽度：100%；
}

泰坦尼克号泰坦尼克号
泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号

如果我理解正确，我认为您可以使用flexbox实现这一点：

。标题文本{
文本对齐：左对齐；
溢出：隐藏；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit线夹：2个；
文本溢出：-o-省略号-lastline；
字体大小：14px；
线高：1米；
排名：0；
保证金：0；
左：0；
}
.头衔{
对齐项目：柔性端；
显示器：flex；
弯曲方向：行；
位置：相对位置；
最小高度：40px；
宽度：200px；
边框：1px纯红；
}
.包装纸{
高度：83px；
位置：绝对位置；
宽度：100%；
}

泰坦尼克号泰坦尼克号
泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号泰坦尼克号

这不是很清楚。你能举个例子吗？@Laif请看以下内容：。更新了我的问题你能把标题放在两个场景的中心吗？为什么收割台容器的高度是固定的？@Laif不，我不能。要求显示两行标题，就像现在小提琴示例中的一样，如果标题足够短，可以容纳一行，则开始在第二行显示标题。标头容器具有固定宽度，因为其父容器的父容器具有固定宽度。为了简单起见，我在这里添加了宽度（因此我不需要发布整个HTML块），但CSS无法做到这一点。你能举个例子吗？@Laif请看以下内容：。更新了我的问题你能把标题放在两个场景的中心吗？为什么收割台容器的高度是固定的？@Laif不，我不能。要求显示两行标题，就像现在小提琴示例中的一样，如果标题足够短，可以容纳一行，则开始在第二行显示标题。标头容器具有固定宽度，因为其父容器的父容器具有固定宽度。为了简单起见，我在这里添加了宽度（因此我不需要发布整个HTML块），但CSS无法做到这一点。它成功了！非常感谢您，我们将学习如何使用flex属性非常好，很高兴这一点成功了！FWIW，我最喜欢的flexbox参考是。我经常提到它，因为flexbox语法在我看来不是很直观。谢谢你的材料，非常有用。虽然您建议的使用flex box的方法在大多数情况下都非常有效，但我想知道是否可以在css中执行以下操作：在某些情况下，我的标题文本范围前面还有一个范围（称为“标题前缀文本”）：请参见以下内容：。在这种情况下，使用“display:fllex”作为也有前缀的两行长标题，会错误地显示标题和标题前缀（例如，请参阅fiddle）。我无法在一个范围内合并标题和标题前缀，因为我需要为标题前缀范围应用不同的字体样式。是否尝试阻止前缀文本换行？如果是这样，您可以尝试添加

空白：nowrap到前缀
或添加
flex wrap:wrap到
.title
包装器。好的，我想我现在知道了。我对演示进行了重构，但需要注意的是，这在IE11或以下版本中不起作用。如果您需要深度浏览器支持，我建议您使用它！非常感谢您，我们将学习如何使用flex属性非常好，很高兴这一点成功了！FWIW，我最喜欢的flexbox参考是。我经常提到它，因为flexbox语法在我看来不是很直观。谢谢你的材料，非常有用。虽然您建议的使用flex box的方法在大多数情况下都非常有效，但我想知道是否可以在css中执行以下操作：在某些情况下，我的标题文本范围前面还有一个范围（称为“标题前缀文本”）：请参见以下内容：。在这种情况下，使用“display:fllex”作为也有前缀的两行长标题，会错误地显示标题和标题前缀（例如，请参阅fiddle）。我无法在一个范围内合并标题和标题前缀，因为我需要为标题前缀范围应用不同的字体样式。是否尝试阻止前缀文本换行？如果是这样，您可以尝试添加
空白：nowrap到前缀
或添加
flex wrap:wrap到
.title
包装器。好的，我想我现在知道了。我对演示进行了重构，但需要注意的是，这在IE11或以下版本中不起作用。如果您需要深度浏览器支持，我建议使用
.title-text {
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: -o-ellipsis-lastline;
    font-size: 14px;
    line-height: 1em;
}