html - 滚动条不会干扰悬停时的文字换行

Question

我博客的许多页面都采用以下结构:

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;
}

Answer 1

解决此问题的一种快速方法是始终显示滚动条，即使没有可滚动的内容也是如此。这可以防止内容左右移动。

CSS: overflow-y: scroll;