html字体变大自动换行,网页css中实现字符超出宽度自动换行和英语字符不断行的解决方法...

需求:

为了使英语字符不断开,我在显示内容的style是text-align:justify; text-justify:inter-ideograph。可是这样子在后台添加内容时,如果不是键盘输入的,而是copy到输入框里的话,这样前台显示出来的帖子内容会把表格撑得很宽。有人说采用自动换行就会解决这个问题style=”word-break:break-all”。可是这样一来,英语单词又断了。如何才能将这两个矛盾统一起来呢?

参考的帖子是这样的:

overflow:hidden的意思是超出溢出,通俗点就是超出不显示。

word-wrap:break-word的意思是自动段字换行。可能是针对与中文字。

word-break:break-all的意思也是是段字换行。它与上面的区别在于,可以断掉一些 较长的英文字母,使表单不至于撑破。主要针对于英文。

以下是详解:

1、三种样式都不写的情况下(只举英文例子)div的宽度是100px:

ni nia nia nidad niadnai nida nin andisdn nidasndadsfsdf dasdasdadad ada .

2、第二种情况只写overflow:hidden div的宽度是100px:

ni nia nia nidad niadnai nida nin

3、第三种情况overflow:hidden; word-wrap:break-word; div的宽度是100px;

ni nia nia nidad niadnai

nidasndadsfsdf nin ninniadnai nida nin .

注意:由于nidasndadsfsdf的单词太长所以不能给断开,所以,整个词给断下来了。

4、第四种情况overflow:hidden; word-wrap:break-word; word-break:break-all;

div宽度还是100px。

ni nia nia nidad niadnai nidasnda

dsfsdf nin ninniadnai nida nin .

注意:由于nidasndadsfsdf的单词被断开了。

上面的测试都没有问题,但是放到我的内容上面仍然还有问题。

最后,参考了很多论坛,终于找出了问题,问题原来出在   !空格的ASCII码为32,字符实体 的名字叫做”不中断空格”,其ASCII码为160。虽然显示出来可能 和空格一样,但浏览器可能不会将其和空格一样对待,所以那串英文成了一个”单词”,不会自动换行。

你只需将 再替换回去,而且在你的后台程序中将那句替换空格的语句去掉,如果这样会影响到排版,也可以将那句replace改成将两个空格替换成一个全角空格或两个 ,这样不会影响到单词间的单个空格。

造成这样的问题是由于编辑器的bug,使用的是ckeditor,之前一直都没有问题,格式化核心JS文件后就有了这个bug,修改的那叫一个汗啊,看来以后下载第三方插件的JS不能随便格式化或者净化了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值