CSS实现div添加过长的英文字母或数字的内容显示一排而溢出时，进行自动换行

最新推荐文章于 2024-05-13 14:25:36 发布
最新推荐文章于 2024-05-13 14:25:36 发布
阅读量1k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37630796/article/details/79498039
版权

想用js动态往div添加内容，添加的内容过长会溢出到div外面，后来查资料得知，在div css布局中，遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。

当然中文字在div或任意盒子中均会自动换行不需要css样式实现，只有连续的字母或数字会出现不自动换行问题，所以需要CSS解决。

解决办法：

word-wrap:break-word

在div的css中添加上面的样式,进行强制换行

小白彩
关注
专栏目录
关于文本的换行、溢出(单行溢出、多行溢出)与样式
qq_44812835的博客
02-03 2554
1.前言 1.在日常开发过程中我一直对文本的处理都是模棱两可，因为会认为就是样式问题肯定简单，不用记，用到了就查，可是今天竟然一个小小的问题让我困惑了很久，所以下定决心把它拿下。 2.分享疑惑 1.让我疑惑了一下的是这个 到底文本默认是换行还是不换行呢？ 2.平时写文本限制宽度的情况都是换行的,为什么还疑惑呢？ 给大家看一下 <div class="box1"> <p class="p1"> 我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我
flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)
EnidChann的博客
10-24 7万+
如图需求: 1. 一行显示3个 2. 强制换行 3. 宽度不写死 4. 高度固定 -- html <div class="mycards"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"&g...
css解决字母数字过长无法换行问题
Xiang_Gong_Ya_的博客
11-25 336
white-space:normal; word-break:break-all; word-wrap: break-word;
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2150
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
css 长单词连续数字换行渲染异常
shuo747的博客
03-14 437
方便找，平时直接用这个 word-wrap: break-word; word-break: break-all; white-space: pre-wrap; 允许长单词换行到下一行： word-wrap: normal|break-word; normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 在恰当的断字点...
html 字母数字 显示不全,html页面显示不全问题
weixin_42303955的博客
05-31 466
contentType="text/html;charset=utf-8"%>Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&g...
Android Flowlayout:LinearLayout内部控件自动换行
07-20
在`Android Flowlayout`中，当一行无法容纳更多的子视图时，它们会自动换行到下一行，类似于HTML中的`<div>`布局或者CSS的`display: flex`。这种布局方式使得开发者无需精确计算每个子视图的位置和大小，而是由...
HTML DIV CSS基础
Gzzsk1的博客
10-11 390
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。DIV是html的一个标签 css是一个样式表提示：以下是本篇文章正文内容，下面案例可供参考。
【HTML】 div并排显示无空隙（占满显示屏）+等距排列
weixin_44512370的博客
08-22 4080
最终效果 代码基于浏览器的页面大小进行布局，实现div撑满整个屏幕的近似效果，但在实际操作中需要考虑更多的因素，来达到撑满显示屏的效果。 最终代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="height:100%"> <head> <meta charset="utf-8" /> <title>div in line&l
css内容超出隐藏，文字只显示一半。
weixin_46409887的博客
02-03 2289
css内容超出隐藏，并设置行，文字显示一半的问题解析。
html5如何显示字母,怎样在CSS中解决长英文单词的页面显示问题？
weixin_35661054的博客
05-31 306
简言在页面排版中，经常遇到长英文单词溢出段落容器的情况，如何解决该问题？现编制如下对比演示程序：演示程序42du.cn-在线演示程序部分html代码 word-break:break-all; Extraordinarily longlong word!CSS代码.break-all { word-break: break-all;}.break-word { word-w...
css最后一排文字字体显示一半显示不全
hugejihu9的专栏
10-08 3664
1、html 代码： &lt;!DOCTYPE html&gt;      &lt;html&gt;      &lt;head&gt;         &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;                 &lt;title&gt;DIVCSS5实例之显示
css单词太长时自动换行
最新发布
m0_61134931的博客
05-13 351
1.单词太长超出盒子自动换行。
Html中div里面的文字太长不换行的问题！
Itmei的博客
08-10 2896
1.Html中div里面的文字太长不换行的问题！ 有时候div里面的值不是我们固定下来的，从后端回去到的字符串有长有短，很可能会影响到其他div内容布局，这个时候我们需要把width(宽度给规定下来)，height(高)给它设置成（auto），然后在div的style中添加 word-wrap: break-word; word-break: break-all; overflow: hidden; 如图所示: 这样设置完成后太长的会把宽度给占用满了后会自
18.文字超出部分用省略号替代:①单行文字溢出white-space: nowrap；overflow: hidden； text-overflow:ellipsis；②多行文字溢出③英文不自动换行
lazylYYY的博客
07-19 283
一.单行文字溢出 /* 这个单词的意思是如果文字显示不开，自动换行 */ /* white-space: normal; */ /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */ white-space: nowrap; /* 2.溢出的部分隐藏起来 */ overflow: hidden; /* 3.文字溢出的部分
设置div中文字超出时自动换行
盏茶作酒的博客
11-16 8577
一、对于div强制换行 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} 2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden; 同样的FF下也没有很好的实现方法，只能隐藏或者加
div设置超出宽度自动换行
分享--------留住生活
10-26 1万+
div内容超出宽度自动换行，设置宽度之后，再设置word-break、word-wrap这两个属性即可。如果div里面的内容自动换行后，两行距离过远，可以设置line-height属性，控制行高。 div{ width: 500px; /** word-break: normal(使用浏览器默认的换行规则)|break-all(允许在西文单词中换行)|keep-all(只能在半...
CSS自动换行、强制不换行、强制断行、超出显示省略号
热门推荐
suwu150
05-31 9万+
CSS样式设置自动换行、强制不换行、强制断行、超出显示省略号 P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。...
html div英文自动换行,css 如何处理文本中当英文或数字过长时,自动换行显示呢？...
05-13
可以使用CSS中的`word-wrap`和`word-break`属性来实现自动换行。 `word-wrap`属性可以设置是否允许单词内换行，可选值为`normal`(不允许)，`break-word`(允许)...这样设置后，当英文或数字过长时，就会自动换行显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值