CSS/HTML中的行标题

我正试图用flexbox制作一个有线条的标题。它的工作，但在标题中的文本去下一行，这不是我想要的-它应该留在一行

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 宽度：100%； } 猿是很酷的动物 不是吗？

---

添加一条规则，以阻止文本使用.title{white space:nowrap；}换行：

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 宽度：100%； } .头衔{ 空白：nowrap； } 猿是很酷的动物 不是吗？

---

添加一条规则，以阻止文本使用.title{white space:nowrap；}换行：

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 宽度：100%； } .头衔{ 空白：nowrap； } 猿是很酷的动物 不是吗？

---

一种方法是使用flex:1而不是width:100%in.line。这使得该行尽可能长，以覆盖标题留下的空间

例如：

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 弹性：1； } 猿是很酷的动物 不是吗？

---

一种方法是使用flex:1而不是width:100%in.line。这使得该行尽可能长，以覆盖标题留下的空间

例如：

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 弹性：1； } 猿是很酷的动物 不是吗？ 您可以将flex-shrink:0添加到标题中。flex项的默认值为flex-shrink:1-请参阅下面的演示：

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 宽度：100%； } .头衔{ 弹性收缩：0；/*已添加*/ } 猿是很酷的动物 不是吗？ 您可以将flex-shrink:0添加到标题中。flex项的默认值为flex-shrink:1-请参阅下面的演示：

.hr{ 宽度：100%； 显示器：flex； 对齐项目：居中； } .线路{ 高度：3倍； 背景：红色； 显示：内联块； 宽度：100%； } .头衔{ 弹性收缩：0；/*已添加*/ } 猿是很酷的动物 不是吗？ 请注意，内联块可以删除，因为它是无用的。注意，内联块可以删除，因为它是无用的