div文字溢出可滑动，不出现滚动条

最新推荐文章于 2025-07-07 16:36:40 发布
最新推荐文章于 2025-07-07 16:36:40 发布
阅读量7.5k 收藏 9
点赞数 3
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Snoopyqiuer/article/details/82692163
本文探讨了如何使用CSS控制div元素内的文本溢出，通过设置overflow属性和white-space属性实现文本的自动滚动，并展示了如何隐藏滚动条以保持页面整洁。同时，文章提供了具体的样式代码，帮助读者理解并应用到实际项目中。

<div>超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度</div>

div{

border:1px solid #000000;

height: 25px;

width: 50px;

overflow-x: auto;

white-space: nowrap;

overflow-y: hidden;

}

div::-webkit-scrollbar {

display: none;    /* 隐藏滚动条 */

}

Vue - 详细实现动态改变元素容器（非页面body）滚动条位置，在一个容器内设置滚动条，并通过 js 改变滚动条位置教程（设置指定子元素div的滚动条位置）
🏆 前端领域优质创作者
08-25 4909
Vue-动态改变元素容器（非页面body）滚动条位置（设置指定子元素div的滚动条位置），解决Vue页面固定滚动位置，根据ref来获取元素or组件的滚动条位置，如何设置div滚动条的位置，怎么动态设置滚动器元素容器非页面滚动条的指定位置，vue动态改变指定元素滚动条的位置，vue页面使用keep-alive缓存后，点击进入详情页后返回时发现滚动条位置回到了顶部怎么办，Vue-页面缓存（keep-alive）后滚动条回到了顶部，不在原来的位置了（从详情页返回列表时发现滚动条位置回到了最顶部，并没
Vue3 - 详细实现容器鼠标拖曳横向滚动功能，在视图范围内用鼠标拖动滚动内容横向翻滚，vue3横向左右拖拽滚动展示预览组件，鼠标拖动触发横向滚动条的滚动（div容器元素中可用鼠标拖动左右滑动效果）
🏆 前端领域优质创作者
09-23 6192
vue3，nuxt3，横向滚动容器，盒子横向滚动并取消滚动条，Vue3中如何用鼠标进行横向滑动不显示滚动条，pc网站，手机H5页面，移动端，超出的部分让内部出现滚动条，鼠标滚轮使div左右滚动的方法，鼠标拖动而左右滑动，vue3容器内鼠标拖动左右滑动，鼠标在指定区域内可左右滑动改变滚动条，鼠标按住左右滑动查看更多内容，实现鼠标左右滑动查看表格内容，手势滑动代替滚动条，vue3容器内容区域横向推拽滑动横向滚动条组件，横向滑动滚动条，vue3指定元素内鼠标滚轮横向滚动内容，vue3怎么设置鼠标滚动可以横向滑动，
div超出部分滚动并且隐藏滚动条
热门推荐
以秘
06-30 2万+
想要实现的效果是：div具备滚动效果，但是外面看不到滚动条。 需求：博客系统，由于发博客的人数较多，不能全部显示在页面上，所以需要滚动效果，但是界面上一般会安排一个div专门放置从数据库读取出来的博客数据，有滚动条看起来觉得比较丑，于是有了这种需求。 代码： <!DOCTYPE html> <html> <head> <meta charse...
隐藏滚动条：视觉上不可见但功能完整的CSS技巧
最新发布
weixin_31688273的博客
07-07 1154
CSS伪元素是添加到选择器的关键字，用来设置元素的特定部分的样式。它允许开发者在文档树中向不存在的元素添加样式，为内容添加装饰性或结构性的元素，而无需向HTML文档中添加额外的标记。例如，:before和:after伪元素允许你在选定元素的内容之前或之后插入内容。浏览器兼容性问题主要来源于不同的浏览器引擎对Web标准的支持程度存在差异，以及浏览器厂商为了差异化竞争而实现的一些专有特性。例如，每个浏览器都有自己的JavaScript引擎和CSS渲染引擎，它们对标准的解释和实现可能会有细微差别。
div可以滚动但不显示滚动条
nishiweiyj的博客
06-20 726
首先有3个div， 第1个，固定大小是200*200（单位为px，下同） 第2个，不固定大小，其大小要用第3个div把个撑开，但是这个div必需要有滚动条， 第3个，固定大小与第1个div保持一致200*200 1 2 3 4 5 6 7 8 <div style="width: 200px;height: 200px; position: relative;overflow: hidden;">
[前端填坑]div溢出设置滚动条
04-10 9267
    一般情况下，div子元素内容溢出后，想要设置滚动条，只需要将div的style中的overflow设置为auto。但今天遇到一个问题，发现设置后并没有效果。    最后发现子元素的position被设置为absolute，导致滚动条无效。    此时，只需要将div的position设置为relative。也就是说，若子元素position:absolute，想要使用overflow属性的...
div 去掉滚动条
u010609022的专栏
11-04 269
【代码】div 去掉滚动条。
仿百度左右滑动无滚动条
05-18
标题“仿百度左右滑动无滚动条”所指的是在网页设计中实现的一种用户交互效果，它使得用户可以左右滑动内容区域，而不会显示传统的垂直滚动条，这种设计常见于某些网站的新闻列表或者产品展示区域，能提供更加美观且...
滚动条下拉DIV固定在头部不动
霸气十足的me
03-18 4366
pageEncoding="UTF-8"%> 滚动条下拉DIV固定在头部不动 *{padding:0;margin:0;} .ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;} .bc{ width:100%; background-c
layui table去掉右侧滑动条的实现方法
10-16
这将使它们填满父级 `div` 的高度，从而消除因内容溢出而产生的滚动条。代码示例如下： ```javascript function AutoTableHeight() { var dev_obj = document.getElementById('table_and_page_div_id'); var ...
文字溢出滚动展示
10-25
文字溢出滚动展示，循环展示和一个展示的demo.
div布局文本溢出问题解决
qq_16659821的博客
01-29 1582
div布局文本溢出问题解决
高度随内容自动增大，而不产生下拉滚动条
weixin_34238642的博客
08-29 196
<script language="javascript"> //iframe的高度随内容自动增大，而不产生下拉滚动条。 function autoResize() { try { document.all["right"].style.height=right.document.body.scrollHeight; }catch(e){} } </script...
html左右超出显示滚动条,div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？...
weixin_39917718的博客
06-09 1178
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？纯手写 滚动条隐藏掉就行了CSS:*{margin:0px;padding:0px;}.wrap{overflow: hidden;height: 40px;}.cont{height: 60px;overflow-x: auto;overflow-y:hidden ;position: relative;}.state {left: ...
class中的溢出滑动效果
tianxianghuiwei的博客
06-22 469
这是个人做的一个简易效果希望可以帮到大家；
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？
qq_38402659的博客
02-26 1万+
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？ 纯手写 滚动条隐藏掉就行了 CSS: *{ margin:0px;padding:0px; } .wrap{ overflow: hidden; height: 40px; } .cont{ height: 60px; ...
html内容溢出,overflow:auto导致出现滑动条 或者 overflow:hidden导致丢失元素边缘内容解决方法（附带分享自用重置浏览器样式代码）
秋叶原的黑猫的博客
07-26 4451
如标题所说，在子元素内容的宽度并没有超过屏幕大小的情况下，设置了width100%后，再设置overflowauto会出现无意义的左右滚动条（如下图）。又或者设置了overflowhdden，会出现右边内容显示不全，但左边外边框显示正常的情况。...
div内文字的溢出部分用省略号...显示
08-12 6797
单行 <div style=" width: 200px; overflow: hidden; border: 1px solid white; text-overflow: ellipsis; white-space: nowrap; " > 啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿
css样式div横向滚动左右滑动 超出隐藏
11-19
在 CSS 中，要实现在 `div` 元素内容超出时的水平滚动并提供左右滑动效果，你可以使用 `overflow-x` 属性和 `scrollbar-width` 来控制滚动条的显示和行为。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .scrollable-div { width: 300px; /* 设置 div 的宽度 */ white-space: nowrap; /* 防止文本换行 */ overflow-x: auto; /* 当内容超过宽度时，开启水平滚动 */ scrollbar-width: thin; /* 设置滚动条宽度为薄型（可自定义） */ } /* 添加滚动条的外观样式 */ .scrollbar-track { display: flex; align-items: center; -ms-overflow-style: none; /* 隐藏原生滚动条 */ } .scrollbar-thumb { width: 8px; /* 滚动条的宽度 */ background-color: #888; /* 滚动条颜色 */ border-radius: 4px; } /* 在需要的地方添加滚动条 */ .scrollbar-thumb:hover, .scrollbar-thumb:focus { background-color: #555; } </style> </head> <body> <div class="scrollable-div" style="height: 200px;"> 这是一段非常长的内容，可能会导致div元素向右滚动以查看全部内容。 </div> </body> </html> ``` 在这个例子中，`.scrollable-div` 类设置了滚动条样式，当内容溢出时，用户可以通过鼠标滚轮或点击轨道区域进行左右滑动浏览。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值