Css 在DIV中对齐3个文本（左、中、右）

我试着制作一个进度条，里面有文本，在左边，在中间，有时在右边

我几乎是在工作，到目前为止，我唯一的问题是，中间的文本太长，所以它会从div中横跨出来。意思是它环绕着，并且有2行，但是在主div中仍然存在。

这是代码，也许有人可以帮我解决这个问题并稍加改进：

<div class="progress progressSize">
    <div style="width: 50%;" class="progressFill"></div>
    <div class="progressText">
        <span class="leftText">Left Text</span>
        <span class="centerText">Center text that gets too long</span>
        <span class="rightText">Right Text</span>
    </div>
</div>

所以我的问题是中心文本。中间的文字太大，所以横跨2行，但它不够大，无法填满整个栏。因为我为每个保留了33%个：左、中、右文本，中间文本放置在中间，但它像一个界限。

我不知道如何解决这个问题。谁能帮帮我吗

谢谢,

鲁迪

可能溢出：隐藏与身高：1公分结合会有帮助吗？这将裁剪太长的文本

.centerText {
  float: left;
  text-align: center;
  width: 33%;
  overflow:hidden;
  height: 1em;
}

---

您的procressSize CSS应为：

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

这将增加进度div的高度以包含文本

编辑，但如果希望div高度保持不变，请不要将centerText div的宽度设置为33%，并保持progressSize CSS与我提到的方式相同

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

.centerText {
    float: left;
    text-align: center;
    min-width: 33%; // initially, width:33%
    height:auto;
}

---

最小宽度只是一个最小宽度，这样div就不会收缩到33%以下，但它在IE6中不起作用。对于这个问题，使用float的一个替代方法是使用绝对和相对定位，我发现-我需要在没有float的情况下这样做，这帮助我解决了我的问题

---

这确实是一个错误，但这不是我想要的解决方案。我只想把整个div拿走，只要上面有地方。谢谢，谢谢你，奈库斯。这个解决方案使整个div变大，这稍微好一点。不过我想做的是，把它们都放在酒吧里。中心文本仍然有一些空间，只有33%的空间迫使它跨越多行。有没有一种方法可以让我保留左文本、中文本和右文本，而不必使用宽度：33%？基本上，在这一点上，高度和宽度都足够大，可以容纳3个文本，但33%的宽度会迫使它跨越两行作为中文本。如果我去掉宽度：33%，我将无法在左边、中间和右边显示文本。请问有什么解决办法吗？在这种情况下，请删除.centertext的width属性。我认为这是完美的！似乎它解决了一切问题。它完全居中。谢谢

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

.centerText {
    float: left;
    text-align: center;
    min-width: 33%; // initially, width:33%
    height:auto;
}