[HTML] 字串自動截斷…

通常我們在製作網頁時，假如要在Table裡面的某一個TD放入一些文字時，這些文字又太長，會將字串自動斷行，或是把TD拉長，真是討厭…

這時候我們可以用DIV Tag & Style的指令做到自動截斷的功能…
例如語法：
<div style=”border-style:solid; border-width:1px; width: 200px; text-overflow: ellipsis; overflow: hidden“><nobr>ABCDEFG HIJKLMNOP QRSTUV WXYZ</nobr></div>
語法結果：

重點是text-overflow、overflow還有DIV Tag的寬度，假如沒有設定DIV Tag的寬度的話，就算有設定text-overflow與overflow也沒用

text-overflow有兩個字串參數 ellipsis 與 clip
ellipsis會在最後被截斷的地方顯示”…”
overflow有四個字串參數visible、scroll、hidden以及auto…

1. visible會將字串內容毫無保留的顯示出來而不理會DIV的寬度設定
2. scroll會依照DIV的寬度而出現捲軸列
3. hidden會將超過寬度的文字截斷也就是隱藏後面的文字
4. auto網頁自動判斷

以上方法非常好用，但是有個缺點：必須設定DIV的寬度，當頁面大小變更時，就必須重新設定DIV的寬度，而且寬度設定不允許用百分比的方式設定

假如我要用百分比的方式設定寬度，又要能夠自動截斷字串的話該怎麼辦勒?!用INPUT Tag Type=”text”就可以了…

請試一下以下語法：
<input type=”text” name=”T1″ size=”20″ style=”border-style: solid; border-width: 1;width: 200px;cursor:default” value=”ABCDEFG HIJKLMNOP QRSTUV WXYZ” readonly/>
語法結果：

怎麼樣!?語法結果是不是與使用DIV的方法差不多呢!?
雖然INPUT Tag並不是正統的方法，但利用TextBox本身的截斷作用，也可以做到自動截斷的效果，而且當你將寬度以百分比的方式設定時，網頁變更大小時，也會跟著網頁變動呦…

text-overflow MSDN說明：http://msdn.microsoft.com/…
overflow MSDN說明：http://msdn.microsoft.com/…