Question

我的博客上的许多页面都有以下结构：

基本上，文本太多的框在没有垂直滚动条的情况下显示，直到用户将鼠标悬停在它们上面。

但是有一个问题。当滚动条出现时，它会创建自己的边距，这会导致文本换行不同。

我需要一个解决方案，滚动条不会对文本换行产生影响。用户仍必须能够滚动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;

滚动条不会干扰悬停时的文本换行

1 个答案: