css 字元串過長自動...,14、CSS-讓長字元串超過寬度時自動換行

一、相關資訊

當輸出php的一個長字元串時(字元串是沒有換行的)希望在當内容超過所設定的長度時字元串能夠自動換行，否則該沒有換行符号的字元串将超出所設定的寬度，無限拉伸頁面

在純html代碼中，即使不做任何特殊申明，也會自動根據所設定的寬度進行自動換行，例如

測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試

div>

如上代碼會當内容寬度超出100px時會自動進行換行輸出

但當輸出一個php的長字元串時echo$long_content; ?>div>

其中$long_content的内容寬度是遠超過100px的，可以看到内容輸出是不會自動換行的，會根據字元串的寬度無限拉伸頁面，也即有多長就會拉伸多長，定義的寬度形如虛設，顯然不是我們所期望的

二、問題描述

當輸出長字元串時，内容不會自動換行，會無限拉伸頁面

三、解決方案

使用如下的css定義echo$long_content; ?>div>word-break 屬性規定自動換行的處理方法，值 break-all 表示允許在單詞内換行。

word-wrap 屬性允許長單詞或 URL 位址換行到下一行，值break-word 表示在長單詞或 URL 位址内部進行換行。').addClass('pre-numbering').hide();

$(this).addClass('has-numbering').parent().append($numbering);

for (i = 1; i <= lines; i++) {

$numbering.append($('

').text(i));

};

$numbering.fadeIn(1700);

});

});

以上就介紹了14、CSS-讓長字元串超過寬度時自動換行，包括了方面的内容，希望對PHP教程有興趣的朋友有所幫助。