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

作者：袖梨 2022-06-25

当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在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;}

　　

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

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

对于table

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

 代码如下 复制代码

　　
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

 

效果：隐藏多余内容

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

 代码如下 复制代码

　　
abcdefghigklmnopqrstuvwxyz 1234567890abcdefghigklmnopqrstuvwxyz 1234567890

 
效果：可以换行

例子

 代码如下 复制代码

SS

英文对齐:

¨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

相关文章

精彩推荐