html页面内容超长，超过了div的宽度

最新推荐文章于 2022-10-08 15:47:10 发布
最新推荐文章于 2022-10-08 15:47:10 发布
阅读量7.2k 收藏 1
点赞数
分类专栏： 前端
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_24309787/article/details/79280247
版权

在显示评论列表的时候因为在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要将其换行.

代码如下：

word-wrap:break-word; 
word-break:break-all; 
overflow: hidden;/*这个参数根据需要来决定要不要*/

斯维特哈特
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何解决图片溢出,图片溢出div，超出div解决办法
weixin_29957793的博客
06-03 9441
最近在写网页的时候，遇到一个问题图片溢出当我的图片宽度大小没有设置，过大的时候，它会超出我的div宽度。这个时候，我给它设置了一个小于我的div的宽度，它是可以进入div盒子而不溢出的，然而，当我们的浏览器缩小的时候，我的div是栅格布局，固定了百分比会随浏览器可视界面而缩小，但是此时图片因为固定宽度不能同步缩小，还是会发生溢出现象。还有一种将就的办法，就是设置overflow:hidden,隐藏...
html及css中页面总宽度的代码,css 宽度(CSS width)
weixin_28913879的博客
06-09 5957
DIV CSS宽度width样式属性CSS 宽度是指通过CSS 样式设置对应div宽度，以下我们了解传统html宽度、宽度自适应百分比、固定宽度等宽度知识。传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;一、Width语法结构知识： - TOP.divcss5{Width:200px}设置divcss5类宽度为...
html 原生滚动条详解，看这一篇就够了！
zzzzls 的博客
03-18 1万+
最近在做一个聊天室的小案例，遇到了一个关于滚动条的问题，需要对获取的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于 ajax 实现的，没有使用框架，消息容器是一个 div，查阅大量资料后写下这篇文章，以作记录！
html div标签自动宽高,div 宽高 css样式设置
weixin_42522575的博客
05-30 2072
对div配置宽高花样，即div宽度和高度同时配置一、宽高属性宽：width—— width:230px 配置宽值为230px高：height—— height:90px 设置css高值为90px二、div标签内直接运用高宽1、css实例代码此div宽度260px，高100px此div宽度160px，高度70px分袂对两个div设置高度和宽度值，为了看到设置装备摆设高 宽造诣，同时均设置装备摆设...
在html如何设计页面大小,网页设计中页面尺寸标准
weixin_29149709的博客
06-03 5485
网页设计中页面尺寸标准在刚开始进行美工设计的人，对网页设计页面尺寸一般多大，可能会有疑问。下面是小编为大家整理的网页设计中页面尺寸标准，欢迎参考~对于固定宽度的网站布局，设计师常用的.分辨率有：760px、780px、920px、950px等，如今大尺寸、宽屏幕的显示器越来越多，越来越普及，有些设计师也开始采用1000px、1003px这样的分辨率。页面最大化、满屏化的网站看着的确是舒服，但过高的...
vue 判断元素内容是否超过宽度的方式
10-15
// 文本内容超过了元素宽度，可以在这里进行处理，比如添加省略号 this.$set(this.isEllipsis, i, true); } else { // 文本内容未超过元素宽度 this.$set(this.isEllipsis, i, false); } } } } ``` 在这个...
html div没有被撑开的原因及解决办法
11-15
在HTML和CSS布局中，`div`元素是一个常用的块级元素，通常用于组织网页内容。然而，有时我们可能会遇到一个问题，即`div`元素没有被其内部内容“撑开”，也就是说，`div`的高（height）并没有根据内容自动调整。这...
HTML期末大作业html+css+div二十个页面以上
06-13
通过调整`div`的宽度、高度、内边距和外边距，可以创建灵活的布局结构，如响应式设计或网格系统。此外，使用`float`、`display`属性，如`display: flex`或`display: grid`，可以实现更高级的布局控制。 在这个HTML...
HTML+CSS相对宽度和绝对宽度冲突时的div解决方法
11-19
在HTML和CSS布局中，有时我们需要同时使用相对宽度和绝对宽度来实现特定的页面效果，但这两种方式在某些情况下会产生冲突。相对宽度基于父元素的百分比，而绝对宽度则是固定像素值。当一个元素同时设置这两种宽度时...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
独行DIV自适应宽度布局是CSS布局中一种重要的技术，主要应用于创建响应式网页设计，以确保内容在不同屏幕尺寸下都能良好展示。在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这...
html div边框宽度,边框的宽度
weixin_30146171的博客
06-10 3037
可以通过border-width 属性为边框指定宽度。为边框指定宽度有两种方式：可以指定长度值，譬如 2px 或 0.1em；可能使用 3 个环节字之一，它们分别是 thin 、medium(默许值) 和 thick。表明：CSS 不有定义 3 个症结字的具体宽度，以是一个用户代办署理可能把 thin 、medium 和 thick 划分设置为便是 5px、3px 与 2px，而另一个用户署理则...
html 屏幕常用宽度,网页常见的一些尺寸
weixin_33669766的博客
06-16 4757
屏幕尺寸屏幕的总宽度和高度，他们是显示器的尺寸，而不是浏览器的尺寸。这些尺寸以设备像素为单位进行测量，平时很少用到通过screen.width和 screen.height获取窗口尺寸浏览器窗口的内部尺寸，以CSS像素为单位(测量值包含滚动条)通过window.innerWidth和window.innerHeight获取滚动偏移文档的水平和垂直滚动偏移量。因此，您可以找出用户滚动了多少。以CSS...
html div的宽度自适应,div宽度自适应一种简单的解决方案
weixin_34061587的博客
06-14 1万+
大尺寸的显示屏盛行的现在，网页UI设计师经常会根据项目，来设计全屏网站，这样就面临一个网页宽度自适应的问题，在这里笔者给大家分享一个基于css的全屏网站解决方案。上图是笔者写此文时候正在做的一个网站项目，因为行业特殊性，客户在笔者给的几个网站方案中选中了全屏幕大图片显示的网页设计风格，这个网站的首页是一张大尺寸全高清图片全屏显示，显得高端大气上档次，为了保持风格的统一，我也有必要把其他页面都做成全...
html滚动条实现，超简单
热门推荐
qq_33653393的博客
07-04 9万+
在对应的div中，添加overflow,固定高度为400px<div class="panel-body" style="height: 400px; overflow:scroll"> <div style="border: 1px #000000; width: 90%; margin: 0 auto;"> &l...
html 设置div的宽度
追求卓越583的博客
10-08 1576
html 设置div的宽度
html点击某块区域触发条件,三种方法教你HTML实现点击某一个元素之外触发事件...
weixin_42316079的博客
06-04 3413
HTML实现点击某一个元素之外触发事件大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。Button/* CSS代码 */.container{width: 400px;height: 400px;display: flex;align-items: cent...
html网页太宽了怎么办,html中怎么让宽为2000像素的页面在打开网页居中显示并且不出现滚动条?...
weixin_36214932的博客
06-18 962
首先，出现不出现滚动条是看你屏幕分辨率，如果你1024宽的分辨率，2000像素就会有滚动条，除非你在外层设置溢出隐藏，不过如果这样超出1024的部分就会看不见了。居中width:2000px; margin:0 auto;这样写就行html代码：div class=box 首先，出现不出现滚动条是看你屏幕分辨率，如果你1024宽的分辨率，2000像素就会有滚动条，除非你在外层设置溢出隐藏，不过如果...
HTML页面太宽加滚动条,html - 防止滚动条添加到Chrome上的页面宽度
weixin_39622628的博客
06-07 303
html - 防止滚动条添加到Chrome上的页面宽度我有一个小问题试图让我的.html页面在Chrome上保持一致的宽度，例如，我有一个页面(1)，其中有很多内容溢出了视口(右词？)的高度，因此该页面上有一个垂直滚动条(1)。 在页面(2)我有相同的布局(菜单，div，...等)但内容较少，所以没有垂直滚动条。问题是，在第(1)页上，滚动条似乎将元素略微向左推(加到宽度？)，而所有内容都显示在...
内容超出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的宽度等于当前页面超出其他div的内容的宽度
最新发布
05-25
要实现这个效果，需要使用JavaScript来动态计算页面中其他div的宽度，并将计算结果应用到目标div的宽度上。具体实现步骤如下： 1. 获取页面中所有需要计算宽度的div元素，可以通过document.querySelectorAll方法来获取。 2. 遍历获取到的div元素，计算它们的offsetWidth（包括border和padding），并记录下最大值。 3. 将最大值应用到目标div的宽度上，可以通过document.getElementById方法获取到目标div，并设置它的style.width属性。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置div宽度</title> <style> .container { width: 100%; overflow: hidden; } .box { float: left; width: 50%; padding: 10px; border: 1px solid #ccc; } .target { background-color: #f00; color: #fff; padding: 10px; margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="box">这是第一个div</div> <div class="box">这是第二个div，它的内容比第一个div多一点</div> <div class="box">这是第三个div，它的内容比第一个div和第二个div都多</div> </div> <div class="target" id="target">我是目标div</div> <script> var boxes = document.querySelectorAll('.box'); var maxWidth = 0; for (var i = 0; i < boxes.length; i++) { var width = boxes[i].offsetWidth; if (width > maxWidth) { maxWidth = width; } } var target = document.getElementById('target'); target.style.width = maxWidth + 'px'; </script> </body> </html> ``` 在示例代码中，我们定义了一个容器div，并在其中放置了三个需要计算宽度的div元素。然后，我们定义了一个目标div，它的宽度需要等于其他div的最大宽度。 在JavaScript代码中，我们首先使用querySelectorAll方法获取到所有需要计算宽度的div元素。然后，我们遍历这些元素，计算它们的offsetWidth，并记录下最大值。最后，我们使用getElementById方法获取到目标div，并将最大宽度应用到它的style.width属性上。 运行示例代码，可以看到目标div的宽度已经等于其他div的最大宽度了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值