解决内容超出div 并且中英文切换换行问题

最新推荐文章于 2023-06-22 00:52:03 发布
最新推荐文章于 2023-06-22 00:52:03 发布
阅读量309 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48726086/article/details/114282748
版权

问题呈现
在这里插入图片描述
如上图所示 会出现自动判断中文数字英文 导致换行 并且超出盒子 （这里盒子加了内边距）

加入css代码

word-wrap: break-word;
word-break: break-all;

在这里插入图片描述

div中英文无法自动换行的解决办法
12-11
原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。那么，难道我们得在每个字母中间加入一个空格来解决这个问题么？其实不用的，可以通过CSS实现。 解决...
强制中英文换行及超出显示省略号的问题
小草莓的博客
09-30 2608
超出2行不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）超出不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）当固定盒子的宽度时，中文会换行，但是英文和数字不换行。如要想要超出N行再显示省略号，只要改变。
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
weixin_30702887的博客
12-07 193
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为t...
css英文单词换行不截断单词
热门推荐
相对静止
08-21 2万+
字符换行 table,td,th,div { border:1px green solid;} code { font-family:"Courier New", Courier, monospace;} div All white-space:normal; Wordwrap still occurs in a td element that has its WIDTH
Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法
最新发布
colin5210的博客
06-22 8735
1、Css强制英文或数字自动换行 2、让中文按关键词或标签换行 3、Css强制中文不自动换行 4、Css强制中文不自动换行并自动隐藏； 5、Css中英文或数字的超出部分自动省略号…； 6、Css中word-wrap、word-break、white-space、overflow、text-overflow的用法讲解；
超出的英文字母换行
wenlyli的专栏
12-03 1637
超出的英文字母换行：word-wrap:break-word;
html内容超出了div的宽度如何换行让内容自动换行
01-19
在工作中评论内容测试遇到评论着的评论内容为：“dddddddddddddddddddddddddddddddddddddddddddddddddd”，错误的评论，在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要...
多浏览器支持CSS 容器内容超出(溢出)支持自动换行
10-30
通过上述方法，我们可以有效地解决文本超出容器宽度时的自动换行问题，并且保证了良好的跨浏览器兼容性。在实际项目中，可以根据具体需求选择合适的CSS属性组合，以达到最佳的效果。此外，随着浏览器技术的发展，...
【转】css样式自动换行（强制换行）
Jiaen188的博客
08-01 930
原文链接：http://blog.csdn.net/ye987987/article/details/8011875自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行htm
CSS解决中英文的换行、不换行、超出后显示省略号的问题
知行合一，跬步致远
09-17 7507
white-space:nowrap;         //强制不换行（中英文都起作用） white-space:pre-wrap;       //只对中文起作用，强制换行 word-break:break-all;        // 只对英文起作用，以字母作为依据，强制换行 word-break:break-word;    //只对英文起作用，以单词作为依据，强制换行 overfl...
css中实现字符超出宽度自动换行和英语字符不断行的解决方法
hjf_bluesky的专栏
10-08 5290
css中实现字符超出宽度自动换行和英语字符不断行的解决方法 为了使英语字符不断开，我在显示内容的style是text-align:justify; text-justify:inter-ideograph。可是这样子在后台添加内容时，如果不是键盘输入的，而是copy到输入框里的话，这样前台显示出来的帖子内容会把表格撑得很宽。有人说采用自动换行就会解决这个问题style=”word-bre
利用css实现文本超出N行之后显示省略号等css常用小知识点
小白变怪兽
03-01 4695
css代码如下： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 -webkit-box-orient: vertical; 效果如下图所示...
css实现中文换行，英文换行，超出省略
weixin_34335458的博客
04-22 268
英文换行时，是以单词换行，在对应的标签添加对应的属性即可 1 word-break:break-all;只对英文起作用，以字母作为换行依据 2 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3 white-space:pre-wrap; 只对中文起作用，强制换行 4 white-space:nowrap; 强制不换行，都起作用 5 white-...
在table tr td表格中让英文数字超出一定宽度换行的解决办法
lily2016n的博客
10-30 4163
<table border='1'> <tr> <td width="200" style="word-break:break-all;">111rrrrrrrrr111111111rrrrrrrrrrr</td> <td>333333333333333333333333333</td> </tr> </tabl
CSS解决连续数字英文换行问题
2. 在Firefox浏览器中，`word-break: break-all`并不生效，为了解决这个问题，可以选择隐藏超出容器的内容或者添加滚动条。例如： ```css #wrap { word-break: break-all; width: 200px; overflow: auto; } `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值