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

最新推荐文章于 2022-09-03 17:12:53 发布
最新推荐文章于 2022-09-03 17:12:53 发布
阅读量947 收藏
点赞数
分类专栏： 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中添加上面的样式,进行强制换行

小白彩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现连续数字和英文的自动换行的方法
12-30
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行： html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:...
Html中div里面的文字太长不换行的问题！
Itmei的博客
08-10 2654
1.Html中div里面的文字太长不换行的问题！ 有时候div里面的值不是我们固定下来的，从后端回去到的字符串有长有短，很可能会影响到其他div内容布局，这个时候我们需要把width(宽度给规定下来)，height(高)给它设置成（auto），然后在div的style中添加 word-wrap: break-word; word-break: break-all; overflow: hidden; 如图所示: 这样设置完成后太长的会把宽度给占用满了后会自
Css文字在div中自动换行
weixin_30824599的博客
09-19 304
Css文字在div中自动换行word-break:break-all; 文字在div中字段换行 转载于:https://www.cnblogs.com/lbonet/p/11548288.html
css文字超出显示省略号
EmotionComputer
04-16 5666
单行： white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 例子： .main { font-size: 20px; border: 1px solid red; width: 100px; white-space: nowrap; overflow: hidden; text-overfl...
CSS系列之文本换行
老__L的博客
09-03 1548
本文主要介绍CSS的overflow-wrap、word-break属性。CSS属性word-break指定了怎样在单词内断行。CSS 属性是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
CSS解决无空格的字母、数字过长不自动换行的问题
12-13
默认情况下，一个 DIV或者其他元素的文本，如果都是无文字分隔符，无空格，则不会自动换行，比如: 复制代码代码如下: <div class=”detail_title” xss=removed>...
css实现连续的英文或数字自动换行的方法
01-19
对于div1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 复制代码代码如下:#wrap{white-...效果：可以实现换行 2.（Firefox浏览器）white-space:normal; word-break:break-all;overfl
css实现中文换行，英文换行，超出省略
weixin_34335458的博客
04-22 240
英文换行时，是以单词换行，在对应的标签添加对应的属性即可 1 word-break:break-all;只对英文起作用，以字母作为换行依据 2 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3 white-space:pre-wrap; 只对中文起作用，强制换行 4 white-space:nowrap; 强制不换行，都起作用 5 white-...
css中中英文换行，超出省略
weixin_38098192的博客
06-28 3966
1.word-wrap:a.normal 在半角空格或连字符的地方进行换行b.break-word 不截断英文单词换行2.word-break:a.normal 中文到边界上的汉字换行，英文从整个单词换行b.break-all 强行截断英文单词换行c.keep-all 不允许字断开3.white-space:a.normal 默认值b.pre...
css 英文换行且单词始终保持在一起
u011280778的博客
02-14 3594
方法一： 想让单词不换行用 word-break:keep-all; white-space:nowrap;   方法二： dispaly:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;   a换行且a内文本不换行 display:block;或者display:inline-bl...
css文字过长显示...的几种方案
cas_nj的博客
12-27 7730
1.一排超长截距(完美兼容各种浏览器) .zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;} 2.两排甚至多行超长截距：
CSS：解决文本溢出／自动换行／文字两端对齐
小五
01-15 2万+
1 单行文本溢出 .text{ width: 100px;//宽度要定义好 overflow: hidden;//溢出隐藏 text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。 white-space: nowrap;//文字不换行 } 2 多行文本溢出 .text-more{ width: 100px; o...
css文本超出隐藏显示省略号（纯中英文、数字都适用）
m0_46862838的博客
03-25 2729
超出隐藏显示省略号 text-overflow: ellipsis; 显示那三个点 word-break: break-all; 如果不确定会有纯数字或者中文那一定要加上这句，不然到时候就会出现数字有作用而中文却没有作用，或者中文有作用而数字没有用 display: -webkit-box; //使用了flex，需要加 overflow: hidden; //超出隐藏 word-break: break-all; //纯英文、数字、中文 text-overflow: e
word-wrap同word-break的区别
weixin_30458043的博客
09-04 152
word-wrap: normal Default. Content exceeds the boundaries of its container. break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。 word-break: normal...
css实现超出部分显示省略号，css实现字母自动折行
wxl1390的博客
12-18 582
css实现超出部分显示省略号 显示一行，省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /* 不换行，超出部分隐藏且以省略号形式出现*/ 显示两行，省略号 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -
微信小程序新坑-文字溢出连续英文或者英文溢出 会出现字符
小柒的博客
06-17 1684
异常分析 腾讯的浏览器内核中的css解析器对英文不太友好，自带的坑 解决方法 确保溢出部分是中文，不要是连续字母或者多个不同字母的英文，中国产品以中国为主 ...
CSS---解决文本溢出，换行
热门推荐
luxideyao的专栏
08-06 5万+
当我们设置我的的div，或者其它文本框固定宽度之后，文本内容过多就会出文本溢出（显示在区域外面，不换行的情况）。 这时我们可以使用Css中的几个属于来解。有以下的三个属于可以解决问题： 1，word-break 属性规定自动换行的处理方法。 word-break: normal|break-all|keep-all; 值 描述 normal
css 实现溢出不换行 添加展开符合
最新发布
09-08
实现溢出不换行和添加展开符号是使用CSS的文本溢出处理技术。可以使用以下属性和值来实现： 1. 使用`white-space`属性来控制文本的换行方式。设置为`nowrap`可以防止文本换行，即使内容超出容器的宽度。 2. 使用`overflow`属性来控制溢出内容的显示方式。设置为`hidden`可以隐藏溢出部分，使其在容器的边界内显示。 3. 使用`text-overflow`属性来控制溢出内容的展示形式。设置为`ellipsis`可以在溢出部分的末尾显示省略号。 4. 使用伪类选择器`::after`来添加展开符号。通过设置`content`属性为展开符号的unicode码，例如`content: "\25BC"`来显示一个向下的三角形符号。 示例代码如下： HTML： ```html <div class="container"> <p class="text">这是一段很长的文本内容，超过容器宽度会产生溢出。</p> </div> ``` CSS： ```css .container { width: 200px; height: 50px; border: 1px solid #ccc; overflow: hidden; position: relative; } .text { white-space: nowrap; text-overflow: ellipsis; } .text::after { content: "\25BC"; position: absolute; right: 0; bottom: 0; } ``` 以上代码中，`.container`为具有固定宽度和高度的容器，`.text`为文本段落，设置其`white-space`属性为`nowrap`可以阻止文本换行，`text-overflow`属性为`ellipsis`可以在溢出部分显示省略号。通过使用`.text::after`伪类选择器添加展开符号，设置`content`属性为`\25BC`可以显示一个向下的三角形符号。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值