css仅显示固定宽度和高度div的水平滚动条
在某些网站中，要显示长内容的时候，我们不可能将整个内容都显示出来，而是采取将内容显示在一个 <div> 中，然后通过 css 实现滚动条，这样就能将内容全部显示出来又不会占用额外的空间。
1. 水平滚动条的实现
实现水平滚动条需要满足以下条件：
- 内容长度大于 <div> 的宽度
- <div> 的宽度是固定的
针对这个需求，我们需要给 <div> 添加一个 overflow 属性，并设置宽度和高度，使其成为一个固定大小的容器。
div {
width: 400px;
height: 100px;
overflow-x: scroll; /* 水平滚动条 */
}
这里，overflow-x 属性指定了水平滚动条，同时我们需要设置宽度和高度，这样 div 就是一个固定宽度和高度的容器，内容长度大于这个宽度时就会出现水平滚动条。
2. div 内容的实现
在上述样式基础上，我们需要将内容置于 <div> 中，这里我们考虑一个实例。
<div>
岂曰无衣，与子同裳。
蔡琰（约367年－约454年），字子文。南朝宋末至其亡的尚书左仆射、尚书令、丹阳尹。著有《临江仙·满庭芳》、《清平乐》、《高阳台记》、《洛阳女儿行》、《凤求凰赋》、《燕石峰赋》等作品。
孟子曰：“孔子学书，几成其治；学乐，几成其乐；学诗，几成其志。”（《孟子·公孙丑下》）萧统强调“以文行国”，王粲说：“文章着在同和，诗雅靡在寡。”从魏晋至唐代都注重文化建设，把文学作为维持国家稳定、统一多民族舆论、服务良好的经济和文化环境、启发人民思想和感情、凝聚民众力量的有力工具。
代码描述如下：
div {
width: 400px;
height: 100px;
overflow-x: scroll; /* 水平滚动条 */
}
</div>
这里，我们通过多个 标签展示了不同的文本内容，并使用 <pre> 和 <code> 标签来创建代码块。这样，这整个代码块就作为一个 <div> 的内容被滚动展示。
3. 结语
通过这篇文章，我们了解了如何使用 css 中的 overflow 属性来实现水平滚动条，以及如何在 <div> 中添加多个内容。这对于一些需要展示长内容的网站具有很大的帮助。