我博客上的许多页面都有以下结构：
http://jsfiddle.net/gliu/E32Bh/
基本上，文本过多的框会在没有垂直滚动条的情况下显示，直到用户将鼠标悬停在它们上方。
不过有一个问题。当滚动条出现时，它会创建自己的边距，从而导致文本以不同的方式换行。
我需要一个滚动条不会影响文本换行的解决方案。用户必须仍然能够滚动浏览 DIV。我不想看到隐藏的滚动条，但如果这是唯一的方法，那就去做吧。如果有一个纯 CSS/HTML 解决方案，那将是最好的！
代码（因为 StackOverflow 坚持）
<p>Notice how the text gets wrapped differently once you hover over the div:</p>
<div id="scroller">
<div class="content">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</div>
div#scroller {
position: absolute;
width: 75%;
height: 50%;
margin: 0;
padding: 0;
background: black;
color: white;
overflow: hidden;
border: 3px solid gold;
}
div#scroller:hover {
overflow-y: scroll; /* Display scrollbar on hover only */
}
div.content {
padding: 1em;
background: transparent;
}