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

一、相關資訊

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

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

<code><span><<span>div</span><span>style</span>=<span>"width: 100px;"</span>></span>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<span></<span>div</span>></span></code>

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

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

<code><span><<span>div</span><span>style</span>=<span>"width: 100px;"</span>></span><span><span><?php</span><span>echo</span><span>$long_content</span>; <span>?></span></span><span></<span>div</span>></span></code>

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

二、問題描述

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

三、解決方案

使用如下的css定義

<code><span><<span>div</span><span>style</span>=<span>"width: 100px; word-break: break-all;word-wrap: break-word;"</span>></span><span><span><?php</span><span>echo</span><span>$long_content</span>; <span>?></span></span><span></<span>div</span>></span></code>

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 ').text(i)); }; $numbering.fadeIn(1700); }); });

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