如何防止内容聚集在传输分区中

Question

我正试图利用转换css规则，但我的问题是，当转换空闲且没有鼠标悬停时，div中的所有内容都会聚集在一起。一旦你把鼠标放在div中的内容上，或者在我的例子中的标题，就会被拉伸成完整的形式

有没有一种方法可以让标题在一行上以应有的方式延伸，而盒子没有被鼠标悬停？

下面是我的代码示例的jsfiddle：http://jsfiddle.net/3W2hC/

.title { 
    width:420px;
    text-align:center;

提前谢谢。

编辑：我能做到这一点。通过添加宽度。但是，现在有一个滚动条。如何删除滚动条？

Answer 1

如果您希望在div内部剪切内容，只需在css中给定div overflow:hidden即可。

在您的情况下，它将是：

#main {
    overflow:hidden;
    ...
}

这是一把小提琴：http://jsfiddle.net/3W2hC/1/