css中实现字符超出宽度自动换行和英语字符不断行的解决方法
2015-10-08 21:55
656 查看
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改成将两个空格替换成一个全角空格或两个 ,这样不会影响到单词间的单个空格。
备注:本篇文章摘自 http://www.ioedo.com/1433.html
为了使英语字符不断开,我在显示内容的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改成将两个空格替换成一个全角空格或两个 ,这样不会影响到单词间的单个空格。
备注:本篇文章摘自 http://www.ioedo.com/1433.html
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题