如何水平对齐溢出的文本？

Question

我有一些文本会溢出父容器：

body {
  margin: 200px;
}

.container {
  width: 100px;
  height: 50px;
  background-color: #bbb;
  text-align: center;
}

.header {
  white-space: nowrap;
}

<div class="container">
  <div class="header">
    Short Text
  </div>
  <div class="header">
    Very long text that should not wrap and be center aligned
  </div>
</div>

当文本较短时，如预期的那样居中对齐。

但是，当文本溢出容器时，它不再居中对齐。

如何水平对齐文本而不考虑文本的长度？

期望的结果：

Answer 1

html:

<div class="container">
  <div class="header">
   <div>Short Text</div>
  </div>
 <div class="header">
  <div>Very long text that should not wrap and be center aligned</div>
 </div>
</div>
</body>
</html>

css:

body {
  margin: 200px;
}

.container {
  width: 100px;
  height: 50px;
  background-color: #bbb;
  display: flex;
  flex-wrap: wrap;
}

.header {
  white-space: nowrap;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

此处演示，https://jsfiddle.net/jinny/qs7wL4nv/33/

Answer 2

使用文本缩进：

body {
  margin: 200px;
}

.container {
  width: 100px;
  height: 50px;
  background-color: #bbb;
  text-align: center;
}

.header {
  white-space: nowrap;
  text-indent: -8em; 
}

  <div class="container">
    <div>
      Short Text
     </div>
     <div class="header">
      Very long text that should not wrap and be center aligned
     </div>
  </div>

Answer 3

flexbox 可以轻松做到这一点

body {
  margin:0 200px;
}

.container {
  width: 100px;
  height: 50px;
  background-color: #bbb;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.header {
  white-space: nowrap;
}

<div class="container">
  <div class="header">
    Short Text
  </div>
  <div class="header">
    Very long text that should not wrap and be center aligned
  </div>
</div>

如何水平对齐溢出的文本？

How to align overflowing text horizontally?

html

css

overflow

alignment