在网页设计中,我们经常会遇到需要将某些内容水平排列,但由于内容过多或者父元素宽度限制,会出现文字换行的情况。这时,我们需要使用CSS技巧来实现不让文字换行,而是通过左右滚动条来展示全部内容。 为了实现
<div class="container">
<p class="text">这里是需要水平排列的文本内容,当文字过多时将会出现左右滚动条。</p>
</div>
.container {
white-space: nowrap; /* 不换行 */
overflow-x: auto; /* 显示左右滚动条 */
}
<br>
.text {
display: inline-block; /* 元素以行内块级方式排列 */
}
粉丝
0
关注
0
收藏
0