果洛皆料电子有限公司

為什么表格會(huì)被撐大?

  • 發(fā)布于:2019-06-26
  • 262 人圍觀

解決思路:

  這個(gè)問(wèn)題一般發(fā)生在單元格內(nèi)容中出現(xiàn)不間斷的英文或標(biāo)點(diǎn)符號(hào)時(shí)就不會(huì)自動(dòng)換行,表格被撐得很大,所以問(wèn)題的關(guān)鍵在于配置讓他自動(dòng)換行或強(qiáng)制換行。

具體步驟:

  給表格定義以下CSS屬性:

  table-layout:fixed;word-wrap:break-word;word-break:break-all

  完整代碼示例:

  <tablestyle="table-layout:fixed;word-wrap:break-word;word-break:break-all;border:1pxsolid#000000;width:200px">

  <tr><td><script>document.write(newArray(267).join("!"))</script></td></tr>

  </table>

  提示:代碼

  <script>document.write(newArray(267).join("!"))</script>

  的作用在瀏覽器中輸出266個(gè)嘆號(hào)"!"

  特別提示

  未定義CSS之前,單元格內(nèi)的內(nèi)容不會(huì)自動(dòng)換行,而定義之后在定義的寬度邊界外強(qiáng)制換行。
  
特別說(shuō)明


  本例用到表格的CSS屬性table-layout、word-wrap和word-break屬性。

  table-layout配置表格的布局算法。fixed:固定算法。

  word-break配置單詞內(nèi)的換行行為,特別是對(duì)象中出現(xiàn)多語(yǔ)言的情況。break-all:依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則,允許在字內(nèi)換行,也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。

  word-wrap配置當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)是否斷開(kāi)轉(zhuǎn)行。break-word:內(nèi)容將在邊界內(nèi)換行。

萬(wàn)企互聯(lián)
標(biāo)簽: