html 中数字换行,CSS实现连续数字和英文的自动换行的方法

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行：

html

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

css#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

或者

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以实现换行

2.(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 1234567890

效果：可以换行

3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

复制代码代码如下:

abcdefghigklmnopqrstuvwxyz1234567890

效果：隐藏多于内容

5.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框。最后，这种现象出现的几率很小。

html 中数字换行,CSS实现连续数字和英文的自动换行的方法相关推荐

ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法发布时间:2021-07-01 12:08:38 来源:亿速云阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
gvim中利用录制宏产生连续数字
方法步骤: a-->0-->Esc-->qa -->yy-->p--Ctrl + a -->yy --> p -->Ctrl + a -->q - ...
vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
keyup事件在中文输入法下输入英文,vue中对应的val属性值为空.控制台显示并没有获取到任何值,但是input中确实有字母.纳尼?说好的双向绑定呢? 要解决这个问题可以采用watch+keyup事 ...
html中占位隐藏,css样式占位和不占位隐藏元素的方法
css样式常用display: none;与visibility: hidden;方法设置元素隐藏,其中display:none方法隐藏元素不占位,visibility: hidden;方法隐藏元素占 ...
正则案例二:匹配有且仅有3个连续数字的字符
一.需求描述近期收到朋友的一个需求,需要在一堆字符串中查找连续3个数字的字符,连续数字可能出现在开头.中间.结尾,而且如果连续数字超过3个,也不符合条件. 二.解决方案 2.1 Oracle解决方案 ...
【mySql】利用笛卡尔积生成连续数字
原理: 有2行数据的表a和有3行数据的表b进行笛卡尔积(第三个c表只有一个数据xi=0,不会增加结果表的行数), 会生成2x3=6行数据的结果表,在select时将变量自加1,可得到连续数字. 仅需要 ...
css 第二行换行,CSS换行详解
普通文本段落的换行案例说明:在实际应用中我们常遇到这样的问题,就是一段文本,有了明确的宽度,需要文本自动换行.(如下图) 案例分析:上面两个图,没有使用任何排版的CSS属性,也就是默认情况下,块元素 ...
html 数字自动换行,css怎么让连续数字字母强制换行？
在div+css布局中,在div.p.h2.h1等盒子里连续英文字母或连续数字会排成一排显示不会自动随盒子宽度限制而自动换行.那么怎么让连续数字字母强制换行?下面给大家介绍一下. 中文字在DIV或任意 ...
CSS控制连续英文字母和数字强制换行
原文链接:http://hi.baidu.com/jtgln/blog/item/e28291b355703fadd8335a56.html 大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大 ...
解决html连续字符或数字换行的问题
解决html连续字符或数字换行的问题参考文章: (1)解决html连续字符或数字换行的问题 (2)https://www.cnblogs.com/plBlog/p/11428177.html 备忘一 ...

html 中数字换行,CSS实现连续数字和英文的自动换行的方法

html 中数字换行,CSS实现连续数字和英文的自动换行的方法相关推荐

最新文章

热门文章