Centering truncated text with offset - CSS only

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

The real place is the one bellow - I add it only as a visual reference, but the title should only appear in the yellow div — Itay Gal, Feb 13 '17 at 16:02
is it what you need?: https://jsfiddle.net/banzay52/pzbk869h/ — Banzay, Feb 13 '17 at 16:30

score 3 · Accepted Answer · edited May 23 '17 at 12:18

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>

score 0 · Answer 2 · edited May 23 '17 at 10:29

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

Centering truncated text with offset - CSS only

2 Answers2