将text文本放入可调整大小的div中

Question

我的网站上有一个可调整大小的侧边栏菜单。侧边栏在折叠时具有折叠动画过渡。此侧栏中的某些文本需要居中。问题是如果你使用text-align: center;之类的东西来格式化文本，当你调整容器div的大小时文本就会移动，因为div的中心点正在改变。

我能做的最好的办法就是设置white-space: nowrap;并用左眼填充眼球来手动居中文本。这很好用，除了我有动态生成的文本，我必须居中。这意味着使用这种方法我将不得不动态地找到文本的长度并相应地调整填充，这似乎是错误的。

它不必使用nowrap样式，但是有一些方法可以将文本居中在div中并且在div调整大小时不会移位吗？

jsfiddle illustration：https://jsfiddle.net/singerbradley/dvmauj3f/28/#&togetherjs=nvnJwReUA7

编辑：

让我澄清一下我的目标。我希望调整大小div中的文本在div处于全宽时居中，并在div调整大小时保持在该位置。我还希望文本在容器缩小时显示为切断（通过使用overflow: hidden;和white-space: nowrap;来实现）而不是转到下一行。基本上，我想要在容器缩小时没有文本移动的底部框中发生的事情。

.enhance {
  border-color: red;
  border-style: solid;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 20px 0;
  width: 300px;
  overflow: hidden;
  transition: all .5s linear;
}

#wrap {
  text-align: center;
}

#nowrap {
  white-space: nowrap;
  text-align: center;
}

#wrap:hover {
  width: 50px;
}

#nowrap:hover {
  width: 50px;
}

<p style="width:500px;">
Hover over each box to see it in motion. The centered, line wrap text shifts with div resize.
</p>
<div id="wrap" class="enhance">This text has line wraps.</div>
<div id="nowrap" class="enhance">This text has no line wraps.</div>

Answer 1

鉴于您的编辑，您完成此操作的方法是创建一个内部容器并将其设置为父级的宽度。请参阅<span>内的#nowrap以及添加的跨度CSS。

.enhance {
  border-color: red;
  border-style: solid;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 20px 0;
  width: 300px;
  overflow: hidden;
  transition: all .5s linear;
}

#wrap {
  text-align: center;
}

#nowrap {
  white-space: nowrap;
  text-align: center;
}

#nowrap span {
  display: block;
  width: 300px;
}

#wrap:hover {
  width: 50px;
}

#nowrap:hover {
  width: 50px;
}

<p style="width:500px;">
Hover over each box to see it in motion. The centered, line wrap text shifts with div resize.
</p>
<div id="wrap" class="enhance">This text has line wraps.</div>
<div id="nowrap" class="enhance"><span>This text has no line wraps.</span></div>

Answer 2

在这里，文字现在没有转移.. 我希望这有帮助。

＆＃13;

＆＃13;

.enhance {
  border-color: red;
  border-style: solid;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 20px 0;
  width: 300px;
  overflow: hidden;
  transition: all .5s linear;
}

.wrap {
  text-align: center;
}

#nowrap {
  white-space: nowrap;
}

#wrap:hover {
  width: 50px;
}

#nowrap:hover {
  width: 50px;
}

＆＃13;

<div id="nowrap" class="enhance wrap">This text has line wraps.</div>
<div id="nowrap" class="enhance">This text has no line wraps.</div>

＆＃13;

＆＃13;

＆＃13;