中文文字过长，超过div框度，设置div的滚动条

最新推荐文章于 2024-05-30 18:55:27 发布
最新推荐文章于 2024-05-30 18:55:27 发布
阅读量313 收藏
点赞数
分类专栏： css 稍不注意 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcq2yqq/article/details/113513593
版权

中文文字过长，超过div框度，设置div的滚动条

  • 碰到的情况是这样的

文字超出去了，但是如果是英文就没有这样的问题

出现问题的原因：

    是当文字长度超出div宽度时，会自动换行。

解决办法：

    设置了overflow:auto;或者overflow-x:auto;之后

 还要设置 white-space:nowrap; 表示 会强制文字在同一行显示， 直到遇到<br />换行标签

效果如下：

 

大功告成

xcq2yqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS样式设置div滚动条示例代码
12-13
首先，要显示滚动条，我们需要在`div`元素上设置`overflow`属性。在示例代码中，`.scroll`类的`overflow`属性被设置为`auto`，这意味着当内容超出容器的宽度或高度时，浏览器会自动显示滚动条。如果只想显示竖直滚动...
给div加滚动条 div显示滚动条设置代码
09-25
div加滚动条在前端的网页布局中为了达到类似textarea的效果采取的一种方式，下面提供了几种设置方法，需要注意的是直接为div指定overflow属性为auto即可，但是必须指定div的高度
页面内容过长，如何定位页面滚动条
Teng_s2000的专栏
03-29 7268
有一个页面，由于内容太长，所以出现了垂直滚动条；在页面中，有多个按钮可执行服务器端代码，如此一来，点击了某一按钮执行操作并完成操作后，页面又重新定位在顶端，如果要执行相同按钮的代码，这时候又要拖动滚动条来寻找到相应按钮才能操作，如此，给客户的印象一点都不好，有没有一种办法，能够智能的定位在页面中的位置，比如，点击哪个按钮进行操作，操作完成之后，仍然定位在那个按钮的位置，而不定位在页面顶端呢，还请大
css实现div自动添加纵向滚动条
zunguitiancheng的专栏
11-03 1874
http://www.cnblogs.com/shunyao8210/archive/2011/01/13/1934216.html
在DIV中设置内容超出后自动显示滚动条（可分别设置横向竖向是否展示）
最新发布
TC0221的博客
05-30 1460
利用overflow:auto属性实现侧边或者横向出现滚动条，也可以利用overflow-x:hidden设置横向滚动条隐藏或者overflow-y:hidden实现纵向滚动条隐藏，实现单边出现滚动条！
html开发 一行文字太长自动换行,一行文字超过div宽度的时如何让它不换行当
weixin_39638188的博客
05-31 1178
div+css如何让超过屏幕宽度的时候不换行把外面那个div宽度设置比屏幕大就行了，这样浏览器会出现滚动条，如果不想浏览器出现滚动条，给div属性overflow:scroll;或者overflow:hidden;根据自己需夜影驱动编程小编今天和大家分享给html内容超出了div的宽度如何换行让内容自动换行应该是文字超出吧， 这个一般英文比较常见，要在div里面加属性word-wrap: brea...
怎么限制文本在div中的显示范围，不超过div的范围
互联网－从零开始
11-23 5197
css: word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden; /*内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
div中文字超出自动换行
阿坤的博客
09-11 925
word-wrap: break-word;
js固定DIV高度,超出部分自动添加滚动条的简单方法
10-27
在网页设计中，有时我们需要对某个元素，如`<div>`，设置固定的显示高度，并且当内容超过这个高度时，自动添加滚动条以便用户浏览所有信息。本文将详细讲解如何使用JavaScript实现这一功能，主要涉及的知识点包括...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
本文将详细介绍如何通过CSS来设置`div`标签内的滚动条属性和样式。 首先，要让`div`元素显示滚动条，我们需要设置`overflow`属性。这个属性决定了当内容溢出元素边界时的处理方式。有以下几个可选值： 1. `visible...
js DIV滚动条随机位置的设置技巧
12-11
<title>JS DIV滚动条随机位置 #scrollableDiv { overflow: auto; height: 200px; width: 300px; border: 1px solid black; } ()"> <div id="scrollableDiv"> <!-- 在这里放置内容，内容足够多以使div...
限制div高度当内容多了溢出时显示滚动条
09-25
主要介绍了如何限制div高度当内容多了溢出时显示滚动条，这个方法很实用，特别是在需要显示更多内容的时候，好了看看下面的示例
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
在网页设计中，有时我们需要对某些元素（如`div`）进行自定义，以实现特定的视觉效果，比如模拟原生浏览器的滚动条。这里提到的问题是，在IE10浏览器中，当`div`的宽度小于18像素时，模拟的滚动条无法正常工作。这个...
css实现div自动添加滚动条(图片或文字等超出时显示)
01-21
原来用过，没有太在意，最近又用到。... 参数： 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为b
html中设置让div中的内容超出后自动显示滚动条
01-19
在html页面中，我们有时需要让div中的内容超出后自动显示滚动条，我们可以这样设置： 复制代码代码如下: <div class=”classlist”> <div class=”autoScroll”> ”rblClasses” runat=”server” DataTextField=”...
div的滚动条如何实现
12-13
当内容超过 `div` 的设定高度或宽度时，我们可以通过设置 `overflow` 属性来控制是否显示滚动条，以及滚动条的行为。下面将详细介绍如何在 `div` 中实现滚动条及其相关设置。 首先，要让 `div` 显示滚动条，我们...
文本域滚动条变化
qq_45683093的博客
11-20 278
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jss/jquery-1.3.2.min.js"></script> <title>文本域的滚动条高度变化</titl...
内容超出div,设置滚动条
热门推荐
qq_46239275的博客
12-11 1万+
当内容超出div时,自动出现滚动条的条件: 1、内容必须在div中； 2、div要设置宽高； 3、overflow 设置 auto； 备注： 1、overflow:auto; 当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条； 2、overflow-x:auto; 当内容宽度超出div宽度，自动出现水平滚动条； 3、overflow-y:auto; 当内容宽度超出div高度，自动出现垂直滚动条； 注意： 设置好后会自动换行；
div内容超出自动滚动
莫逸雪的博客
05-24 5632
情况一： 1.要求：div内容超出自动滚动，鼠标进入停止滚动 2.效果： 3.代码（vue） <template> <div class='container'> <div ref="contentRef" class="content"> <div v-for="item in 20" :key="item" class="contentItem">{{item}}</div> </div&
DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏
06-09
要在DIV中添加滚动条，可以使用CSS中的overflow属性。将其设置为auto或scroll，当内容超出DIV的高度或宽度时，就会出现滚动条。示例代码如下： ```css div { height: 200px; width: 300px; overflow: auto; /* 或者 overflow: scroll; */ } ``` 如果想要隐藏滚动条，可以使用CSS中的::-webkit-scrollbar伪元素。将其样式设置为display:none即可。示例代码如下： ```css div::-webkit-scrollbar { display: none; } ``` 这样就可以隐藏滚动条了。注意，这种方式只适用于WebKit浏览器（例如Chrome和Safari）。如果要在其他浏览器中隐藏滚动条，需要使用其他方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值