html - CSS 流体标题

Question

我需要在 CMS 的页面模板中制作流畅的标题，我已经构建了下面的代码。

<div class="content-output-title-container" id="page-title">
    <h1 class="content-output-title">{page_name}</h1>
</div>

CSS:

.content-output-title-container {
    height: 50px;
    margin-top: 0!important;
    padding-top: 42px;
    z-index: 4!important;
    width: 100% !important;
    background: #FFF;
    display: inline-block;
}

.content-output-title {
    font-weight: 400;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    position: relative;
    min-width: 280px;
    border-left-width: 20px;
    border-left-color: #00AFA9;
    border-left-style: solid;
    border-right-width: 20000px;
    border-right-color: #64405F;
    border-right-style: solid;
    display: inline-block;
}

如您所见，我在两个边缘上都有一个边框，它需要在任何长度的标题文本中保持不变。

问题是当标题文本是这样的

边框行为并且标题在容器中是全宽但是如果标题类似于

在 CSS 中有没有一种方法可以使较长的标题流动而不用存在的边框换行？

Answer 1

如果您的意思是您希望第二个示例沿一行继续(仅在达到页面的 100% 宽度时换行)，那么您可以使用 :after 伪元素来实现:

.content-output-title-container {
  width: 100%;
  overflow: hidden;
}

.content-output-title {
  display: inline-block;
  float: left;
  
  font-weight: 400;
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  border-left-width: 20px;
  border-left-color: #00AFA9;
  border-left-style: solid;
  margin-right: 20px;
}

.content-output-title:after {
  display:block;
  content: " ";
  background-color: #64405F;
  width: 2000px;
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
}

<div class="content-output-title-container" id="page-title">
    <h1 class="content-output-title">{page name}</h1>
</div>

<div class="content-output-title-container" id="page-title">
    <h1 class="content-output-title">{extra long page name}</h1>
</div>

<div class="content-output-title-container" id="page-title">
    <h1 class="content-output-title">{extra extra long page name}</h1>
</div>

<div class="content-output-title-container" id="page-title">
    <h1 class="content-output-title">{extra extra extra long page name}</h1>
</div>