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>