CSS Fluid Title

Question

I need to make a title fluid in a page template for a CMS I have built the code I have is below.

<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;
}

As you can see I have a border on both edges which needs to persist for any length of title text.

The issue is that when the title text is something like

the border behaves and the title is full width in the container however if the title is something like

Is there a way in CSS that I can make the longer title flow and not wrap with the borders present?

Answer 1

If you mean that you want the second example to continue along one line (only wrapping when it gets to 100% width of the page) then you can do this by using the :after pseudo element:

.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>