CSS开发：DIV去除横向滚动条且内容自动换行

最新推荐文章于 2023-09-27 08:11:05 发布
最新推荐文章于 2023-09-27 08:11:05 发布
阅读量4.8k 收藏 2
点赞数 2
分类专栏： Dojo/Jquery/ExtJS/JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jonahzheng/article/details/13295623
版权

Div中内容如果是数字或字母，当内容很多时，若不进行设置会出现横向滚动条。

要实现DIV去除横向滚动条且内容自动换行，加入下列样式就可以了

<div id="ab" style="overFlow-x: hidden; word-break:break-all">
  {$list.oral}
</div>

来自东子哥的Blog

海峡移动开发技术群：13734312

东子哥7
关注
专栏目录
CSS—移动端导航（div）横向滑动，并消除横向滚动轴（图文详情）
Poppy_LYT的博客
08-05 6534
CSS—移动端导航横向滑动，并消除横向滚动轴 假设我写了一个导航（div照样适用） <ul> <li>学习</li> <li>学习</li> <li>学习</li> <li>学习</li> <li>...
css控制span,div强行换行,溢出部分隐藏以及显示滚动条
☆夏の独憶☆
01-14 778
css控制文字强制换行: span{ word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; } 盒子文字设置,文字不换行,超出部分显示省略号: div{ white-space: nowrap; text-overflow:ellipsis; overflow: hidden; } ...
DIV+CSS 样式之 不出现横向滚动条，内容自动换行
weixin_30832405的博客
06-10 687
今天写一个项目的时候发现在一个地方放overflow-x:hidden;overflow-y:auto;word-break:break-all; 不起作用，在公用的css里面放就可以了。 body,a,table,div,span,td,th,input,select{overflow-x:hidden;overflow-y:auto;word-break:break-all;}...
css实现 清除滚动条
日积月累 默默搬砖
03-01 1万+
在我们写一些项目时需要将其显示出来的滚动条给其隐藏,在此提供了2种方案,均已经过实战考验,可放心应用于实战 第一种 : 找到需要隐藏的元素,给其添加 ::-webkit-scrollbar{ display:none; } 即可 注意 : 这里是两个 :: 不是一个 第二种 : 给最外层元素添加 width:100%; padding-right:20px; ...
如果去除div显示的横向滚动条
喜爱兰兰
01-04 8420
试过很多方法，最简单最暴力的就是给body添加一个overflow-x:hidden的样式。 该样式的意思就是不显示超出部分，并禁止添加横向滚动条。同理overflow-y：hidden是消除竖向滚动条，对应的还有overflow:hidden。
前端：让文字在div里自动换行（禁用横向滚动条）
你个无聊小demo的博客
04-01 1913
让文字在div里自动换行
css实现div自动添加滚动条(图片或文字等超出时显示)
09-25
css实现div自动添加滚动条比较实用的功能，当图片或文字超出div所规定的宽或高时，会自动出现滚动条，这一点还是比较有利于用户体验的，本文整理了一些实现自动滚动条的方法，感兴趣的朋友不妨参考下，或许对你认识...
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
基于jquery的横向滚动条（滑动条）
10-28
通过以上步骤，我们可以创建一个既能在顶部又能在底部显示的横向滚动条，且该滚动条在IE6、Firefox和Chrome等浏览器中都能正常工作。这个解决方案不仅提供了良好的用户体验，还能适应内容宽度未知的情况，因为滑块的...
css实现移动端横向滚动不换行效果
weixin_45633318的博客
06-07 538
1.html <div class="content-img"> <div class="contentItem-img"></div> <div class="contentItem-img"></div> <div class="contentItem-img"></div> <div class="contentItem-img"></div> <div cl
实现横向滚动 并宽度不固定
hahahhahahahha123456的博客
03-05 592
摘要 前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。 有时会忘记 原理 子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动 // html 如下 &lt;div class="content"&gt; ...
CSS3无缝滚动（去除多余滚动条，解决自动换行，百分比布局）
qq_41619567的博客
12-05 1478
html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;throttle&lt;/title&gt; &lt;link rel="stylesheet" href=&
css 样式 文本自动换行设置 及滚动条设置，省略号设置
weixin_42666092的博客
08-05 677
1.自动换行设置 div{ word-wrap:break-word; word-break:normal; } 强制不换行 div{ white-space:nowrap; } 2.设置滚动条 div{ overflow-x:hidden; overflow-y:auto; } 3.单行文本设置省略号 div{ width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsi
css 页面去除滚动条方法
qq_39111074的博客
04-17 9805
css 页面去除滚动条方法
css如何去除页面滚动条
tianxianghuiwei的博客
09-27 1309
提示下，如果碰到没有滚动条而鼠标又没有滚轮的朋友，该怎么浏览网页呢？呵呵，大家可以用键盘上面的方向键上方的PageUp和PageDown来上下翻页，也可以用空格往下拉网页和Shift+空格往上拉网页，还有一个方法就是用上下方向键来拉动，另外还有按Home键回到网页顶部，End键到。就可以了，这样滚动条就不会显示出来了。呵呵，既然我说了不影响浏览，那当然是有方法的，浏览的方法就是用鼠标的滚轮，虽然滚动条没了，可是鼠标滚轮还是能够让网页上下滚动的。达网页底部，呵呵，是不是方法很多呢？在body{}中加入。
css去除滚动条
weixin_60409964的博客
12-07 351
只需要在出现滚动条的元素上加上 - webkit - scrollbar 属性即可
CSS中overflow隐藏、滚动条、换行等用法
热门推荐
xiaokangmiclong的博客
12-18 1万+
div
css怎么去掉滚动条滑块,css如何去掉滚动条样式
weixin_28224217的博客
08-03 9142
css去掉滚动条样式的方法是，给滚动条设置【overflow:hidden】样式，将滚动条完全隐藏即可，例如【::-webkit-scrollbar {display: none; /* Chrome Safari */}】。本文操作环境：windows10系统、css 3、thinkpad t480电脑。如果我们想要去掉滚动条样式，其实可以选择将他们隐藏，从而达到去除滚动条的目的。如果需要隐藏滚...
div 加横向滚动条
最新发布
10-09
要在 div 元素中添加横向滚动条，可以使用 CSS 的 overflow-x 属性。将 overflow-x 设置为 scroll 或 auto 可以创建一个横向滚动条。下面是一个示例： ``` <div style="width: 400px; white-space: nowrap; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值