Question

我试图根据屏幕的中心来设置标题，而它的容器不占用屏幕宽度的100％。

我还需要将文本截断，并且不要在右边留下填充。

This is what I've got so far - JSFiddle。您可以看到黄色div中的文本与下面的文本不对齐。如果我向黄色div添加填充权限，则在调整大小时，文本将不会占用黄色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;
}

Answer 1

我终于想出了这个，再一次伪帮助我实现了不可能的事情

通过添加width和min-width，它会根据您的要求保持文字居中

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

Fiddle sample

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

更新

在回答同时具有左项和右项的another question时找到了另一种方法

这是一个好处，它不需要预先设定的宽度。

Fiddle sample

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这很棘手，因为您希望将wchar_t的内容置于视口中心，而as explained here在Flexbox容器内的最佳方式是使用middle-h位置，使其相对于视口。但是，让absolute使用绝对位置元素更难。

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

text-overflow: ellipsis;

http://www.codeply.com/go/S2sw2jrn7p

使用偏移量对齐截断文本 - 仅限CSS

2 个答案: