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

一、相關資訊

當輸出php的一個長字串時（字串是沒有換行的）希望在當內容超過所設定的長度時字串能夠自動換行，否則該沒有分行符號號的字串將超出所設定的寬度，無限展開頁面

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

<divstyle="width: 100px;">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試div>

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

但當輸出一個php的長字串時

<divstyle="width: 100px;">echo$long_content; ?>div>

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

二、問題描述

當輸出長字串時，內容不會自動換行，會無限展開頁面

三、解決方案

使用如下的css定義

<divstyle="width: 100px; word-break: break-all;word-wrap: break-word;">echo$long_content; ?>div>

1. word-break 屬性規定自動換行的處理方法，值 break-all 表示允許在單詞內換行。
2. 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教程有興趣的朋友有所協助。

