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:是段字换行。它与上面的区别在于,可以断掉一些
较长的英文字母,使表单不至于撑破。主要针对于英文。
以下是详解:
三种样式都不写的情况下(只举英文例子)div的宽度是100px:
ni nia nia nidad niadnai nida nin andisdn nidasndadsfsdf dasdasdadad ada .
第二种情况只写
overflow:hidden
div的宽度是100px:
ni nia nia nidad niadnai nida nin第三种情况
overflow:hidden; word-wrap:break-word;
div的宽度是100px;ni nia nia nidad niadnai
nidasndadsfsdf nin ninniadnai nida nin .
注意:由于nidasndadsfsdf的单词太长所以不能给断开,所以,整个词给断下来了。第四种情况
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改成将两个空格替换成一个全角空格或两个 ,这样不会影响到单词间的单个空格。
原文链接
css中实现字符超出宽度自动换行和英语字符不断行的解决方法相关推荐
- html字体变大自动换行,网页css中实现字符超出宽度自动换行和英语字符不断行的解决方法...
需求: 为了使英语字符不断开,我在显示内容的style是text-align:justify; text-justify:inter-ideograph.可是这样子在后台添加内容时,如果不是键盘输入的 ...
- css中text文字超出宽度省略号显示并鼠标悬停显示剩余全部:
代码:记得写在渲染文字的那个标签class上: display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: bre ...
- css文字超出宽度自动换行
CSS文字超出宽度自动换行[转] word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需求来决定要不要*/ 目录 ...
- CSS中获取显示器的宽度
最近在做Vue,需要获取显示器的宽度,最终搜索到一篇微博,可以在CSS中直接获取浏览器宽度. .solid{ width: 100vw; height:calc(100vw / 750 * 23 ...
- [css] 在实际编写css中你有遇到过哪些浏览器兼容性的问题?怎么解决的?
[css] 在实际编写css中你有遇到过哪些浏览器兼容性的问题?怎么解决的? 必用的三个工具PostCSSAutoprefixerBrowserslist 个人简介 我是歌谣,欢迎和大家一起交流前后端 ...
- [css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法 把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
- 2g限制 outlook_OutLook超出2G大小限制的 PST 和 OST 的解决方法-邮件备份法
OutLook2003 超出 2G 大小限制的 PST 和 OST 的解决方法 概要 与 Microsoft Outlook 早期版本中的个人文件夹 (.pst) 文件相比, Microsoft Of ...
- c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法 发布于 2020-2-22| 复制链接 vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然 ...
- VMware vSphere Client中启动虚拟机提示No boot filename received/Operating System not found解决方法
VMware vSphere Client中启动虚拟机提示No boot filename received/Operating System not found解决方法 参考文章: (1)VMwar ...
最新文章
- Node 深入Stream(2)
- 个人博客系统分享(可打包直接上云)
- 为什么年龄大了近视还增加_年龄明明一样大,为什么有人长得年轻,有人显老呢?...
- matlab costas环,MATLAB写COSTAS环的问题。
- 【noi 2.6_162】Post Office(DP)
- Error:(199) undefined reference to `__android_log_print'
- 如何写一份前端开发简历
- mysql优化-Explain工具介绍
- 对微信卖小电影的一次内网漫游
- mysql 1032错误_修复mysql slave复制1032错误
- 南京大学交叉培养计算机与金融招生人数,教务处组织召开计算机与金融工程实验班师生见面会...
- 高德地图API总结--Marker多点聚合
- 魔兽世界开服教程——魔兽世界服务器架设全攻略---战网+Ladder排行版
- 客户端和服务端简单开发
- 选中exchange缓存模式后 GAL不会更新
- gpd计算机等级,GPD 文件扩展名: 它是什么以及如何打开它?
- 运维监控都监控些什么
- 学人工智能好就业吗?AI职业前景分析
- 高性能云计算架构与实践8-计算节点计算服务搭建
- db db2_monitorTool IBM Rational Performace Tester