位置：首页>> 网络编程>> 网页设计>> IE7的web标准之道 Ⅲ（7）

IE7的web标准之道 Ⅲ（7）

作者：阿一　来源：JustinYoung's Blog　发布时间：2008-08-20 12:55:00　

标签：overflow,标准,ie7,设计

一个大问题与残缺的美丽

从截图看，网页在IE6、IE7和FireFox中的确显示一致了（就布局显示而言）。但是，却发现了一个大问题！那就是——这并不是我想要的结果呀。假使这里的div是一个侧边栏，我们只是要求，它老老实实的那么“宽”，不要乱“撑”宽度就可以了，内容我们还是要看的呀，你不能把内容都剪切了不让我看呀。

如何让“很长度文字”换行显示呢？其实在前面我们已经使用到了，那就是“word-wrap: break-word”。虽然它是IE的特有样式，但是足以先解决IE6和IE7中的问题。但是FireFox中没有这个样式，那FireFox下如何使“很长文字”自动换行显示呢？我们遗憾的发现FireFox并没有提供类似的样式供我们使用，目前唯一的解决方案是利用JavaScript实现。原理很简单，就是根据宽度，将文本截取成多段，在每段后面强制加上换行符。下面的实现示例可能会有助于你的理解：

<!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=utf-8" />
    <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
    <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
    <title>YES!B/S!文章示例页面</title>
    <style type="text/css">
        #div1{
        border:1px solid red;
        width:50px;
        word-wrap: break-word;
        }
    </style>
</head>
<body>

<div id="div1">
alonglonglonglonglonglonglonglonglongword from http://justinyoung.cnblogs.com/

</div>

看着下面的截图，终于能即满足要求，又在IE6、IE7和FireFox中显示一致了！

终于能即满足要求，又在IE6、IE7和FireFox中显示一致了

但是，如同残缺的美丽，惊艳的美隐藏着巨大的缺憾。令人遗憾是——如果容器中的内容，不是文字，而是图片时，这种方法将无能为力。只能将容器放宽，或者缩小图片，当然，你也可以使用“overflow: hidden”将超出的内容剪切掉。另一个遗憾是——在FireFox中，div1容器里面的标签和样式也将失去，只留下文本……

第一页上一页 4 5 6

8 下一页

投稿

IE7的web标准之道 Ⅲ（7）

猜你喜欢