当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行

并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break

word-wrap用来控制css换行
两种取值:
(1)normal 
(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

word-break用来控制断词
三种取值:
(1)normal
(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

【解决方法】
可以在CSS中加入
word-wrap:break-word;
word-break:break-all;

CSS代码使纯英文数字自动换行的更多相关文章

  1. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  2. 通过css代码使边框变圆角(ie9以下浏览器不支持)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-11) CSS代码: <style> #myDiv { border-radius: 4px; /*这句就是 ...

  3. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  4. css控制英文内容自动换行問題

    css控制英文内容自动换行 HTML: <!-- 因为要显示的内容是用户通过CMS添加进入数据库,再抓取出来前台显示的,所以你根本无法 控制每一行内容的长度. 所以我在显示内容的div设置了一个 ...

  5. label设置渐变时不显示纯英文纯数字字符串

    提出问题: 当对UILabel设置渐变color时,有点小问题.即:text为中文或中英混合字符串时显示正常,纯英文字符串不显示!!!   剖析问题: 经搜索了解到:在显示中文时,绘制渐变color的 ...

  6. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  7. 页面定制CSS代码初探(一):页面变宽 文本自动换行 图片按比缩放

    初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...

  8. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  9. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

随机推荐

  1. 保持UIImagePickerController后导航栏风格统一

    1. UIImagePickerController 状态栏始终保持某一种风格. -(void)navigationController:(UINavigationController *)navig ...

  2. java 、android 知识图谱

    java知识图谱: android知识图谱: 照此图练习,神功自成.....

  3. java socket通讯(二)处理多个客户端连接

    通过java socket通讯(一) 入门示例,就可以实现服务端和客户端的socket通讯,但是上一个例子只能实现一个服务端和一个客户端之间的通讯,如果有多个客户端连接服务端,则需要通过多线程技术来实 ...

  4. mysql 怎么登录

    mysql -uroot -p回车后,输入密码,再回车即可.如果自己没有修改的话,默认密码为空.

  5. nyoj 61 传纸条

    点击打开链接 传纸条(一) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做 ...

  6. 如何实现Oracle修改用户权限 .

    这里将介绍Oracle修改用户权限的实现过程,包括一些权限管理方面的东西.希望通过本文能对大家了解Oracle修改用户权限有所帮助. ORACLE数据库用户与权限管理 ORACLE是多用户系统,它允许 ...

  7. (easy)LeetCode 234.Palindrome Linked List

    Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...

  8. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  9. 项目积累——POPUP

    父页面: <td nowrap> 合同名称: </td> <td colspan="2" nowrap> <param:popup cli ...

  10. OS X 升级 Yosemite 后,Intellij IDEA 与 VirtualBox 启动失败

    报错: Dyld Error Message: Symbol not found: _CGContextSetAllowsAcceleration Referenced from: /Library/ ...