|
一個大問題與殘缺的美麗
從截圖看，網(wǎng)頁在IE6、IE7和FireFox中的確顯示一致了（就布局顯示而言）。但是，卻發(fā)現(xiàn)了一個大問題！那就是——這并不是我想要的結(jié)果呀。假使這里的div是一個側(cè)邊欄，我們只是要求，它老老實實的那么“寬”，不要亂“撐”寬度就可以了，內(nèi)容我們還是要看的呀，你不能把內(nèi)容都剪切了不讓我看呀。
如何讓“很長度文字”換行顯示呢？其實在前面我們已經(jīng)使用到了，那就是“word-wrap: break-word”。雖然它是IE的特有樣式，但是足以先解決IE6和IE7中的問題。但是FireFox中沒有這個樣式，那FireFox下如何使“很長文字”自動換行顯示呢？我們遺憾的發(fā)現(xiàn)FireFox并沒有提供類似的樣式供我們使用，目前唯一的解決方案是利用JavaScript實現(xiàn)。原理很簡單，就是根據(jù)寬度，將文本截取成多段，在每段后面強制加上換行符。下面的實現(xiàn)示例可能會有助于你的理解：
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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>
<script type="text/javascript">
// <![CDATA[
if(document.getElementById && !document.all) wordWarp4ff(6)/*數(shù)值6根據(jù)寬度需要發(fā)生變化*/
function wordWarp4ff(intLen){
var obj=document.getElementById("div1");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
// ]]>
</script>
</body>
</html>
看著下面的截圖，終于能即滿足要求，又在IE6、IE7和FireFox中顯示一致了！
終于能即滿足要求，又在IE6、IE7和FireFox中顯示一致了
但是，如同殘缺的美麗，驚艷的美隱藏著巨大的缺憾。令人遺憾是——如果容器中的內(nèi)容，不是文字，而是圖片時，這種方法將無能為力。只能將容器放寬，或者縮小圖片，當然，你也可以使用“overflow: hidden”將超出的內(nèi)容剪切掉。另一個遺憾是——在FireFox中，div1容器里面的標簽和樣式也將失去，只留下文本……
出處：
責任編輯：bluehearts
上一頁 引起頁面布局混亂的禍首 [6] 下一頁 引起頁面布局混亂的禍首 [8]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 7 頁 引起頁面布局混亂的禍首 [7]
