使用偏移使截断的文本居中 - 仅限 CSS答案

【问题标题】：Centering truncated text with offset - CSS only使用偏移使截断的文本居中 - 仅限 CSS
【发布时间】：2017-07-01 16:15:43
【问题描述】：

我正在尝试根据屏幕的中心使标题居中，而它的容器不会占用屏幕宽度的 100%。

我还需要截断文本并且不想在右侧留下填充。

This is what I've got so far - JSFiddle。您可以看到黄色 div 中的文本与下面的文本没有对齐。如果我在黄色 div 中添加 padding-right，则在调整大小时，文本不会占用黄色 div 的 100%。有什么建议？

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

【问题讨论】：

哪一个是真题？
真正的地方是下面那个——我添加它只是作为视觉参考，但标题应该只出现在黄色的div中
是你需要的吗？：jsfiddle.net/banzay52/pzbk869h

标签： html css flexbox

【解决方案1】：

我终于想通了，又一次伪帮助我实现了不可能的事情

通过添加width 和min-width，它将根据您的要求使文本居中

.middle-h::after{
  content: '';
  display: inline-block;
  width: calc(100% - 150px);
  max-width: 148px;           /*  150px - 2px border  */
}

Fiddle sample

堆栈sn-p

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

更新

在回答another question 时发现了另一种方式，它有一个左右项目

这样做的好处是，它不需要预定义的宽度。

Fiddle sample

堆栈sn-p

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

【讨论】：

【解决方案2】：

这很棘手，因为您想将middle-h 的内容在视口中居中，而as explained here 在flexbox 容器中的最佳方法是使用absolute 位置，以便它相对于视口居中。但是，让text-overflow: ellipsis; 使用绝对位置元素更难。

这是我找到的最接近的方法..

<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

【讨论】：