Html table td 內容自動換行

2021-07-29 16:26:04 字數 1291 閱讀 9206

td隨著內容自動適應寬度:

style="word-wrap:break-word;word-break:break-all;"

width="100px"

;>

td>

注:

必須設定td的寬度

word-wrap:設定或檢索當前行超過指定容器的邊界時是否斷開?>轉行

normal: 預設值。允許內容頂開指定的容器邊界

break-word: 內容將在邊界內換行。如果需要,詞內換行( word-break )也將發生

word-break:設定或檢索物件內文字的字內換行行為。尤其在出現多種語言時

normal: 預設值。允許在詞間換行

break-all: 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文》本行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字

keep-all: 與所有非亞洲語言的 normal 相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字

p

值 描述

normal 只在允許的斷字點換行(瀏覽器保持預設處理)。

break-word 在長單詞或 url 位址內部進行換行。

css屬性 :white-space設定如何處理元素內的空白。

例項:規定段落中的文字不進行換行:

td

值 描述

normal (預設)空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 htmlpre中的標籤。

nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到標籤為止。

pre-wrap 保留空白符序列,但是正常地進行換行。

pre-line 合併空白符序列,但是保留換行符。

inherit 規定應該從父元素繼承 white-space 屬性的值。

文字在一行內顯示,超出則加省略號: 需要寬度(width:100px)、 溢位內容隱藏(overflow:hidden;)、 強制在同一行顯示(white-space: nowrap;)、 省略號(text-overflow:ellipsis;)

p

html table td 內容過多

table td 當需要應藏超出td寬度內容時,設定overflow屬性為hidden。反之為visible。值 描述visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。...

網頁內容自動換行

在預設情況下網頁是不自動換行的,如果字元很長的話,就會使網頁變型,因為它是通過絕對長度來控制的,其實只要在 控制中新增一句 就ok完整的是 style table layout fixed word break break all word wrap break word word break br...

DIV的內容自動換行

word break break all和word wrap break word都是能使其容器如div的內容自動換行 它們的區別就在於 1,word break break all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單 詞很長 congratulatio...