当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在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. 内存调试工具---valgrind

    安装 1.到www.valgrind.org下载最新版valgrind-3.2.3.tar.bz2 2.解压安装包:tar –jxvf valgrind-3.2.3.tar.bz2 3.解压后生成目录 ...

  2. java获取本机IP地址和MAC地址的方法

    // 获取ip地址 public static String getIpAddress() { try { Enumeration<NetworkInterface> allNetInte ...

  3. IGeoDatabaseBridge2.GetLineOfSight

    IGeoDatabaseBridge2.GetLineOfSight Method Returns a line-of-site indicator interpolated from the TIN ...

  4. poj 1753 Flip Game

    点击打开链接 Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25674   Accepted: 1109 ...

  5. Centos安装软件小结-20160325

    三种安装包 bin包 rpm包 源码包 1.bin包 1.先赋予权限: chmod 777 *.bin 2.开始安装: ./.bin 2.rpm包(以jdk为例)\ yum search jdk\ y ...

  6. 零基础如何入门Python

    编程零基础如何学习Python 如果你是零基础,注意是零基础,想入门编程的话,我推荐你学Python.虽然国内基本上是以C语言作为入门教学,但在麻省理工等国外大学都是以Python作为编程入门教学的. ...

  7. 《点石成金-访客至上的web和移动可用性设计秘籍》读书笔记

      简介 作者Steve Krug,惯例先去了解一下本书的作者,发现书中介绍的并不多,百度一下后发现这本书比作者出名.好吧,百度就是这样子,作者自称web可用性咨询师,手上这本书是第三版再版,第一版2 ...

  8. 传输层(一)TCP的三次握手和四次挥手及关闭套接字的原理

    TCP连接需三次握手才能建立,断开连接则需要四次握手. 客户端TCP状态迁移: CLOSED->SYN_SENT->ESTABLISHED->FIN_WAIT_1->FIN_W ...

  9. 应用层(一)HTTP服务访问基本流程和HTTP报文详解

    HTTP属于TCP/IP模型中一个面向文本的应用层协议,所使用的服务器端口号的TCP中的80端口,通信双方在这个基础上进行通信. 每个服务器都有一个应用进程,时刻监听着80端口的用户访问请求.当有用户 ...

  10. Flash Builder 4.6 BUG 远程访问受阻

    今天调试项目的时候,惊讶的发现在使用RemoteObject进行远程访问时出现奇怪现象,只能在服务器本地实现访问,在其他客户机上提示2048错误,send failed,差点没把我吓死,记得之前测试过 ...