HTML 中設置水平滾動條非常簡單,只需要使用 CSS 中的 overflow-x 屬性即可實現。在 HTML 中,我們可以使用 pre 標簽來展示預先格式化的文本,其中無需擔心空格、換行符、標簽等內容的格式問題。以下是一個示例代碼,展示如何使用 pre 標簽和 CSS 屬性來設置水平滾動條。
首先,在 HTML 中添加一個 pre 標簽,將文本格式化。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget tortor vitae ex euismod laoreet. Aenean ac quam mi. Fusce et arcu ac urna aliquam facilisis id ac neque. Etiam nec libero nec ex tincidunt luctus. Praesent placerat volutpat mauris vel mattis. Sed efficitur magna velit, a consectetur ipsum tincidunt vel.
然后,在 CSS 中設置 overflow-x 屬性,使其顯示水平滾動條。
pre { white-space: pre-wrap; /* 防止文本溢出 */ overflow-x: auto; /* 顯示水平滾動條 */ }
使用以上代碼,我們就可以輕松設置 HTML 中的水平滾動條了。