如何用css定義表格自動換行,避免變形

來源:互聯網
上載者:User
關鍵字 網頁製作 CSS教程

今天早上一樣開例會,指出了我一個頁面的錯誤,層被撐開了
當時還比較鬱悶,因為我是用中文測試的,沒有問題
他們讓我改英文,完蛋了,面目全非,我啞口無言
改吧,沒辦法啊,技術不到家啊~555~~
以上純屬發牢騷,大家可以省過,找來的解決方案,記錄一下,方便以後查找
=====================================================

style="table-layout: fixed; WORD-BREAK: break-all; WORD-WRAP: break-word"

語法:
word-break : normal | break-all | keep-all

參數:
normal :  依照亞洲語言和非亞洲語言的文本規則,允許在字內換行
break-all :  該行為與亞洲語言的normal相同。 也允許非亞洲語言文本行的任意字內斷開。 該值適合包含一些非亞洲文本的亞洲文本
keep-all :  與所有非亞洲語言的normal相同。 對於中文,韓文,日文,不允許字斷開。 適合包含少量亞洲文本的非亞洲文本

語法:
word-wrap : normal | break-word

參數:
normal :  允許內容頂開指定的容器邊界
break-word :  內容將在邊界內換行。 如果需要,詞內換行(word-break)也行發生

說明:
設置或檢索當當前行超過指定容器的邊界時是否斷開轉行。

語法:
table-layout : auto | fixed

參數:
auto :  預設的自動演算法。 佈局將基於各儲存格的內容。 表格在每一儲存格讀取計算之後才會顯示出來。 速度很慢
fixed :  固定佈局的演算法。 在這演算法中,水準佈局是僅僅基於表格的寬度,表格邊框的寬度,儲存格間距,列的寬度,而和表格內容無關

說明:
設置或檢索表格的佈局演算法。
-------------------------------------------------
以上只能解決IE的問題,這裡FF中我們使用JS插入的方法來解決


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<meta HTTP-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>


<div id="ff"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</ div>

<script type="text/javascript">
/* <![ CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
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;
}
if(document.getElementById   &&   !document.all)   toBreakWord(37)
/* ]] > */
</script>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.