专栏首页小狼的世界不同浏览器对于换行的处理

不同浏览器对于换行的处理

在一个容器中,如果设定了宽度,一般来说自动换行都是比较正常的,但是如果遇到了连续的英文字符,这个问题就会让人头疼。这不,我们部门的用户在测试的时候输入连续的字符,就出现了容器被撑大而样式变形的情况发生,怎么解决这个问题呢?

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

html

<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>

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;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 效果:可以实现换行

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

效果:可以换行

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;无法起作用

<table style="table-layout:fixed" width="200"> <tr> <td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td> <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td> </tr> </table> 效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

下面是综合代码

<!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-Type" content="text/html; charset=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>

<h1><code>IE \ word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE \ word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用PHP的Popen实现RRDTOOL作图的动态输出

    最近看了一下RRDTOOL如何作图,语法确实比较繁琐,但不是太难。命令行下执行的时候,每次都需要输出成为一个文件。我们希望做一个应用,能够动态生成图表,看了看C...

    大江小浪
  • WebLogic中的一些基本概念

    上周参加了单位组织的WebLogic培训,为了便于自己记忆,培训后,整理梳理了一些WebLogic的资料,会陆续的发出来,下面是一些基本概念。

    大江小浪
  • 获取Kafka每个分区最新Offset的几种方法

    更详细的代码工程,可以参考我的GitHub 消费者获取分区列表,并获取分区最新的OFFSET

    大江小浪
  • 通过域名获取主机IP -- struct addrinfo

    参考书籍:《UNIX环境高级编程》 (APUE,男神的书,出第三版了,有需要的私信我)

    看、未来
  • 一首诗的代码

    谙忆
  • 5位可控字符下的任意命令执行 - 另一种解题方法

    题目是hitcon-ctf-2017的babyfirst-revenge,之前是针对babyfirst-revenge-v2来进行学习研究的

    Ms08067安全实验室
  • 线性表抽象数据结构的定义

    鲁郭大侠
  • Pytest跳过执行之@pytest.mark.skip()详解

    在我们自动化测试过程中,经常会遇到功能阻塞、功能未实现、环境等一系列外部因素问题导致的一些用例执行不了,这时我们就可以用到跳过skip用例,如果我们注释...

    橙子探索测试
  • thymeleaf:局部变量 th:with

    当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文,以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >...

    ydymz
  • 【Tbase开源版测评】基于PostgreSQL的国产开源数据库初体验

    之前本人主要使用过oracle,mysql,greenplum,tdsql,tidb等数据库。头一次接触基于PostgreSQL的国产开源数据库,如果如下内容有...

    卖菜小弟

扫码关注云+社区

领取腾讯云代金券