如何在使用溢出HIDDEN时对文本对齐？

Question

我有这个：

<div style="line-height:50px;;white-space:nowrap;overflow:hidden;width:120px;height:50px;text-align:center;">
   <span style="padding:20px;">aaaaaaaaaaaaaaa</span>
</div>

我删除了一些代码以显示它干净。所有代码都返回：

我想将其水平文本对齐到中心。请记住，我也是＆＃34;剪辑＆＃34;文本，因此它没有故意显示所有文本。

Answer 1

对于您想要实现的效果，您可以使用绝对定位和CSS变换的组合。逻辑是将内部跨度偏移到其包含父级的中间点（因此left: 50%），并将其向后移动其自身宽度的一半，因此有效地将其居中于父级（使用{{1 }}）。您可能希望使用供应商前缀进行CSS转换，并注意旧版浏览器不支持它。

transform: translateX(-50%)

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/VCaEQ/

Answer 2

aaaaaa剩下的空间只是你跨度的padding:20px。

• 将padding:20px;放在包含div和..
上
• 让span成为另一个div，然后将overflow:hidden放在div
内

实例：http://jsfiddle.net/Hebj4/

的 HTML

<div id="div1">
   <div id="div2">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

<强> CSS

#div1 {
    width:120px;
    height:50px;
    padding:0px 20px 0px 20px;
    line-height:50px;
    text-align:center;
    white-space:nowrap;
    background-color: #777777;
}
#div2 {
    overflow:hidden;
}