css3栏目滑动 |字母强制换行 css

代码示例如下：
HTML代码:
<div class="container"><div class="item"><h2>栏目1</h2><p>这里是栏目1的内容</p></div><div class="item"><h2>栏目2</h2><p>这里是栏目2的内容</p></div><div class="item"><h2>栏目3</h2><p>这里是栏目3的内容</p></div></div>CSS3代码:
.container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.item {
flex: 0 0 33.33%;
padding: 20px;
box-sizing: border-box;
}
.item h2 {
cursor: pointer;
}
.item p {
display: none;
}
.item.active p {
display: block;
}

在HTML代码中，大家首先创建了一个包含三个栏目的容器，并设置了每个栏目的标题和内容。在CSS代码中，大家使用了弹性盒子布局来创建了一个横向滑动的容器，并对每个栏目进行了样式设置。

栏目标题设置为指针，以便大家在鼠标悬停或点击时使其处于活动状态。此外，大家将栏目的内容隐藏，只有处于活动状态下的栏目才会显示内容。

CSS3栏目滑动是一个简单而实用的技术，可以增强网页的功能和用户体验，让用户更方便地查看和访问网页内容。