Centering truncated text with offset - CSS only - html

Question

I'm trying to center a title according to the screen's center, while it's container doesn't take 100% of the screen's width.
I'm also need to text to be truncated and don't want to leave a padding on the right.
This is what I've got so far - JSFiddle. You can see that the text in the yellow div is not aligned with the text bellow. If I add a padding-right to the yellow div, upon resize, the text won't take 100% of the yellow div. Any suggestions?
HTML
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
CSS
.cont{
width: 100%;
border: 1px solid black;
display: flex;
text-align: center;
}
.left-h{
flex-basis: 150px;
background-color: #e5e5e5;
}
.middle-h{
background-color: yellow;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.real-center{
width: 100%;
text-align:center;
}

Answer 1

I finally figured this one out, and once again a pseudo helped me achive impossible things
By adding a width and a min-width it will keep the text centered according to your requirements
.middle-h::after{
content: '';
display: inline-block;
width: calc(100% - 150px);
max-width: 148px; /* 150px - 2px border */
}
Fiddle sample
Stack snippet
.cont{
width: 100%;
border: 1px solid black;
display: flex;
text-align: center;
}
.left-h{
flex-basis: 150px; /* width/height - initial value: auto */
background-color: #e5e5e5;
}
.middle-h{
background-color: yellow;
flex: 1 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.middle-h::after{
content: '';
display: inline-block;
width: calc(100% - 150px);
max-width: 148px; /* 150px - 2px border */
}
.real-center{
width: 100%;
text-align:center;
}
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
Updated
Found yet another way when answering another question which had both a left and a right item
The upside with this is one, it doesn't need predefined width.
Fiddle sample
Stack snippet
.cont {
display: flex;
text-align: center;
border: 1px solid black;
}
.cont > * {
white-space: nowrap;
padding: 2px 4px;
background: lightgray;
}
.cont > .center {
background: yellow;
overflow: hidden;
text-overflow: ellipsis;
}
.cont .left,
.cont::after {
content: '';
flex: 1;
}
.real-center{
width: 100%;
padding: 2px 4px;
text-align:center;
}
<div class="cont">
<div class="left">
place holder
</div>
<div class="center">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>

Answer 2

This is tricky because you want to center the contents of middle-h within the viewport and as explained here the best way inside a flexbox container is to use absolute position so that it centers relative to the viewport. But, it's harder to get text-overflow: ellipsis; working with an absolute position element.
This is the closest approach I have found..
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
<span class="abs-center">my very long long title goes here</span>
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
.abs-center {
position: absolute;
left: 150px;
right: 150px;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
margin-left: 8px;
margin-right: 8px;
}
http://www.codeply.com/go/S2sw2jrn7p