css英文字母数字自动换行且不断词方法

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

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

word-break用来控制断词

三种取值：

(1)normal
(2)break-all（是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。）
(3)keep-all

word-wrap用来控制换行

两种取值：

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

解决方法

可以在CSS中加入

 代码如下 复制代码

word-wrap:break-word;
word-break:break-all;

.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

 代码如下 复制代码

　　#wrap{word-break:break-all; width:200px; overflow:auto;}

　　<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用table-layout:fixed;强制table的宽度,多余内容隐藏

 代码如下 复制代码
<table style="table-layout:fixed" width="200">
　　<tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table>

 

效果：隐藏多余内容

　　2.(IE浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

 代码如下 复制代码
<table width="200" style="table-layout:fixed;">
　　<tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

 
效果：可以换行

例子

 代码如下 复制代码

<title>SS</title>
<link href="style_tu.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--

body,td,th {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 12px;
       color: #444444;
       word-wrap: break-word;
       word-break: break-all;      
}

-->
</style>

英文对齐:<br>
<div style="font-size:12px;width:300;text-align:justify;text-justify:inter-ideograph">¨Crepower¨ Brand Belts, Chains and other Transmission Parts are manufactured under ISO9001 certified quality-control system. With improved quality material and well-organized production procedures, ¨Crepower¨ power transmission products have noticeably fatigue strength and long-service life.We can supply all types and sizes according to the related standards and customers’ requirements and</div>
<br>
时间： 2024-11-10 01:29:47

css英文字母数字自动换行且不断词方法的相关文章

css实现连续的英文或数字自动换行的方法

 对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.   代码如下: #wrap{white-space:normal; width:200px; } 或者 代码如下: #wrap{word-break:break-all;width:200px;} <div id="wrap">ddd1111111111111111111111111111111111</div> 效果:可以实现

输入一行字符并统计出其中英文字母、空格、数字和其它字符的个数

查看全套"c语言习题集" 题目: 输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 1.程序分析:利用while语句,条件为输入的字符不为'\n'. 2.程序源代码: #include "stdio.h"#include "conio.h"main(){ char c; int letters=0,space=0,digit=0,others=0; printf("please input some character

数字、汉字、标点符号、英文字母的印刷体文本混合识别

问题描述 数字.汉字.标点符号.英文字母的印刷体文本混合识别 请问对于有数字.汉字.标点符号.英文字母的印刷体文本如何对立面的数字进行识别,请给出方法,多谢.

输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。

问题描述 输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数.请教下各方高手,我还是个JAVA初学者,麻烦大家了 解决方案 解决方案二:publicclassZhangZhenWei{publicstaticvoidmain(String[]args){Strings="zhangzhenwei";intnumber=0,smallchar=0,bigchar=0,other=0;for(inti=0;i<s.length();i++){charn=s.charAt

js 验证用户名(大小写英文字母、汉字、数字、下划线)

  * 验证用户名   * (大小写英文字母.汉字.数字.下划线组成的长度3-12个字节)   *   * @parameter string str 字符串   * @return boolean   */  function checkusername(str){    return str.match(/^([u4e00-u9fa5]|[ufe30-uffa0]|[a-za-z0-9_]){3,12}$/);  }    /**   * 验证常规字符   * (只能输入大小写英文字母.汉字

只能输入数字与只能输入英文字母js验证代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

文本框输入限制数字和小数点或英文字母和小数点js代码

个文本框内容的限制输入程序.这表框里只能输入数字和小数点,谁帮我改一下,只能输入小写的英文字母和小数点,和冒号,正反斜杠(:./) 只能输入数字和小数点  代码如下 复制代码 var reg = /^d*.?d{0,2}$/ 开头有若干个数字,中间有0个或者一个小数点,结尾有0到2个数字. 只能输入小写的英文字母和小数点,和冒号,正反斜杠(:./)  代码如下 复制代码 var reg = /[a-z./\:]+/; a-z包括了小写的英文字母,.是小数点,/和\分别是左右反斜线,最后是冒号.整

java统计出其中英文字母、空格、数字和其它字符的个数的2个例子

题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 1.程序分析:利用while语句,条件为输入的字符不为 '\n '. import java.util.Scanner; public class ex7 {   public static void main(String args[])   {    System.out.println("请输入字符串:");    Scanner scan=new Scanner(System.in);    String

php 用户名正则表达式(中文，英文，数字，字母）

php教程 用户名正则表达式(中文,英文,数字,字母) 由字母a-z(不区分大小写).数字0-9.减号或下划线组成 只能以数字或字母开头和结尾 用户名长度为4-18个字符 ^[a-za-z0-9]{1}[a-za-z0-9|-|_]{2-16}[a-za-z0-9]{1}$ 用户名为大写字母小写字母或下划线,并以字母开头,长度为6-20 ^[a-za-z][wd_]{5,19} 用户名:包括英文小写.汉字.数字.下划线,不能全部是数字,下划线不能在末尾 /^[a-z0-9_u4e00-u9fa5