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

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

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

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

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

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

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

这怎么解？

...全文

327 3 打赏收藏举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

風灬雲 2019-01-25

打赏
举报

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

hgwyl 2019-01-25

打赏
举报

那我来接一下分呗~

设计手 2019-01-24

打赏
举报

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

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

在Web前端开发中，'强制单行显示'是表格表头、导航菜单、ID字段等场景的基础需求，其本质是控制文本流生成、容器溢出裁剪与视觉反馈三个阶段。white-space决定空格与换行符如何解析，overflow定义容器对超宽内容的物理约束能力，text-overflow则将溢出状态转化为用户可感知的省略号提示。三者必须协同生效——缺少BFC触发、display类型不匹配或尺寸约束缺失，均会导致ellipsis失效、布局塌陷或横向滚动失控。本文基于真实项目压测数据，解析IE11兼容性边界、Flex/Grid协同陷阱

在网页开发中，文本换行问题一直是前端工程师的高频痛点。很多开发者发现，textarea中的换行内容渲染到普通div后竟然消失了，这背后涉及CSS的white-space属性与HTML解析器的换行符处理机制。white-space控制着空格、制表符和换行符的保留与合并方式，其取值从normal到pre-wrap再到break-spaces，分别对应不同的文本排版策略。同时，浏览器在解析HTML时会将\r\n或\r统一归一化为\n，理解这一规则才能精准定位换行失效的根源。掌握这些基础原理，不仅能解决多行文本展示

在Web前端开发中，文本换行是基础且常见的需求，但开发者经常遇到接口返回的字符串明明包含\n却无法在页面上正确显示的问题。这源于HTML的空白符折叠机制——浏览器默认将连续空白符（包括换行符）合并为单个空格。理解这一原理是解决问题的关键。CSS的white-space属性提供了灵活的控制手段，其中pre-wrap和pre-line值可以在保留换行符的同时实现自动换行，是处理用户生成内容（如评论、日志）的最佳实践。此外，换行符存在\n、\r、\r\n三种形态，跨平台数据需要归一化处理。通过合理运用CSS与数据

富文本编辑器的图片粘贴功能本质上依赖剪贴板API（clipboardData.items）与异步上传机制的协同。其核心原理是捕获paste事件、识别image/*类型文件项、转为File对象并提交至后端接口。技术价值在于显著提升内容生产效率，避免传统‘保存-上传-插入’多步操作。典型应用场景包括政务、企业新闻后台等需高频图文发布的CMS系统。本文聚焦帝国CMS这一特定平台，深入解析其原生CKEditor 4.x定制版对粘贴图片支持缺失的根本原因，并提供不修改核心文件、兼容7.0+版本的零侵入式增强方案。

源码下载地址： https://pan.quark.cn/s/07e7935aff27 在Android应用开发过程中，`ImageView`作为一个基础组件被广泛运用，其主要功能是展示各种图像资源，这些资源可以来源于本地存储或通过网络获取。本文将详细阐述如何动态地变更`ImageView`所显示的图片内容，并借助自定义监听机制来监控和干预图片的加载流程。此类技术在应用开发中具有很高的实用价值，特别是在处理网络用户头像、商品展示图以及实时数据更新的场景下。我们首先需要明确`ImageView`的基本操作方式。在Android平台，我们常通过`setImageResource()`、`setImageBitmap()`以及`setImageDrawable()`等函数来设定`ImageView`的图像内容。然而，这些方法主要适用于已加载至内存中的图像文件，对于网络图片，则需要借助更为复杂的处理逻辑。在实现动态下载并更新`ImageView`中的图像时，我们普遍采用`AsyncTask`或`Loader`来执行后台任务，以此防止主线程被阻塞。本文将重点介绍自定义监听器的构建方法。自定义监听器能够让我们依据图片加载的进程或状态来执行特定的任务，例如显示加载进度指示器或处理加载失败的情况。自定义监听器通常定义为一个接口，其中包含了若干个回调方法，例如`onStart()`、`onProgressUpdate()`、`onSuccess()`、`onError()`等。以下是一个示例接口定义： ```java public interface ImageDownloaderListener { void onStart(); void onProgress(int ...

CSS

61,117

社区成员

60,701

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章