怎么解appendChild生成的div撑破父容器宽度？

设计手 2019-01-24 10:11:22

使用JS的appendChild生成的div宽度固定了，比如这个宽度是150px

然后里面的内容比较多，在内容里面又给了一个class

设置这个class的宽度给固定在200px，超出了父容器150px；就变成这样了如图

试着把父容器设置display: inline-table;也不行

因为是父容器也是动态生成的，好像display: inline-table;没作用。。

这怎么解？

...全文

292 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

風灬雲 2019-01-25

打赏
举报

回复

蚊子再小也是肉，20分我接着

hgwyl 2019-01-25

打赏
举报

回复

那我来接一下分呗~

设计手 2019-01-24

打赏
举报

回复

晕倒，原来是JS设置display:block;造成的！！！

display: inline-table;有用啊，郁闷浪费我的积分！！

一个div可自行编辑，任意输入文字可自动换边且不变形

在上面的代码中，我们首先使用createElement方法创建了一个新的DIV元素，并将其存储在divElement变量中。动态创建DIV元素是其中一个常见的任务，它允许我们在网页中实时生成和操纵新的DIV元素。在上面的代码中，我们使用了textContent属性来设置DIV元素的文本内容，使用style属性来更改更改DIV的背景颜色，以及使用addEventListener方法来为DIV添加一个点击事件监听器。除了添加到容器元素中，我们还可以将动态创建的DIV元素添加到其他位置，例如文档的body元素。

通过封装两个核心工具函数与setBgColor，我们可以统一处理所有关于尺寸与颜色的样式修改请求。这种方式使得调用端无需关心底层实现细节，只需传入正确的参数即可完成操作。/*** 设置指定元素的宽度* @param {HTMLElement} el - 目标DOM元素* @param {string|number} width - 宽度值（支持数字自动加px，或带单位字符串）*/if (!el ||!console.error('无效的DOM元素:', el);return;

qrcodejs2 生成二维码插件还有另外一个 vue-qr插件也可以生成二维码因篇幅原因，本博文只对 qrcodejs2插件及其源码进行解读 cnpm install --save qrcodejs2 使用 <template> <div> <div class="qrcode" ref="qrCodeUrl"></div> </div> </template> <script> imp

先说说思路：1、不固定宽度文字超出显示...，用的css3 overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、文字超出的地方鼠标移入显示全文。我的思路是这样的，先获取容器的宽度、字号、全部文字，把获取的全部文字放到一个动态生成的span中，给span设置字号为容器的字号，再获取出来span的长度，容器宽度小于span...

61,123

社区成员

60,705

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章