HTML如何控制文字的換行、斷行後不顯示等等

基本上文字容器我慣用的是<label>
這個label的css控制碼當中，如果你不設定寬、高或任何其他控制碼，
那就是有多少文字，他就秀多少文字直到超過父親容器的寬度就換行。


如果你設定了寬度，那麼超過寬度的部分就會換行，一直換行到所有文字都呈現完畢為止。


如果你再設定了高度，那麼超過寬度換行下來，超過高度之後，還是都有顯示，並不會截斷。


所以我們知道單純的高度設定，是控制不了文字的。


我們先把高度去掉，我們只設定寬度，然後加上一個white-space: nowrap;這樣會怎樣呢？你會看到畫面上只顯示一行文字，而且一直往右，超過父親容器（比方body）的話，父親會出現捲軸（除非父親有設定不要捲軸）。


接著，我們再加上overflow:hidden;你會發現，超過寬度的部分，被截斷了，終於不會把所有文字都呈現了。


再來，我們再加上text-overflow:ellipsis;之後，會發現，被截斷的文字，顯示方式是在最後會出現「 ... 」三個逗號當結尾，可以讓使用者知道這文字沒有全部顯示，這應該是比較適當、常用的一種用法。
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

最後我在跟各位分享一種組合，但是，我個人覺得不好看


設定寬度、設定高度、設定overflow:hidden;這樣就可以讓文字鎖定在範圍內，但是，此時text-overflow:ellipsis;無法作用，就會讓使用者看到被截斷的文字，不是很好看。

AJAX簡單說

介紹一下最簡單的AJAX模式，看前端如何跟後端溝通，然後讓前端只更新部分畫面，而不會重刷（Reflash），作法很簡單，請先下載範例程式。從client.html中可以看到裡面很簡單，有個按鈕，會觸發JS的function，去做AJAX，而那個JS的function可以從client.js當中看出來，他有一個JQuery提供的,ajax特定格式跟語法。知道了之後，就非常簡單。

利用JQuery提供的,ajax()函式，寫好url : ，告訴程式要呼叫後端哪個PHP，error : 當Ajax失敗，則執行這個函式，看要怎麼顯示給使用者都可以。success : 則是當數值傳回來時要怎麼運作，比方這裡是把#msg那個DIV所包含的子元件替換成PHP回傳的數值：Hello Ajax字串。這樣就不會整頁重刷，而只是更新某些元件，也就即時的更新整個頁面的某一小塊罷了。

還能透過JQuery所提供的 fade in 跟 fade out特效，來達成更完美的更新。

如何在Server端的PHP第一次執行時就讓JS依照PHP的不同數值而產生不同的介面

老觀念再度重複，HTML是網頁的基本主體，CSS用來述說這些主體的長相（長、寬、高、顏色等等），Javascript則功能很多：
1.可以用來讓HTML主體中可以有一些邏輯判斷，來動態的控制長相，或是產生不同的HTML主體。
2.可以作資料的判斷控制，讓資料傳送到SERVER之前，能被判斷過，有效的才會傳送到SERVER，以免浪費網路跟使用者時間。
3.還有更多的可以


這裡介紹一種前端Javascript取得後端PHP變數的用法（其實這時候沒有前後端，而是都還在後端，讓你可以在網頁第一次被載入的時候，就依照PHP的某個值（也許來自資料庫，也許經過某些邏輯判斷），來決定你的排版。


有三個程式檔（點我下載），Example-TestPhpTransParas-Main.php, Example-TestPhpTransParas.js, Example-TestPhpTransParas.css組合起來就可以讓後端的PHP的變數傳遞到Javascript檔案中，進而可以控制.css，來讓排版不同，比方某些HTML主體不顯示、顯示、變顏色、改長寬。底下的重點就在於紅色的部分，他透過PHP語法，把參數用ECHO方式吐到HTML的JavaScript片段裡然後讓JavaScript變數承接這個吐出的數值就行。

（這個範例需要RUN在Web Server上，否則沒法看到PHP的執行效果），而實際應用上，前端的JAVA跟後端的PHP的資料傳遞是透過POST跟GET的，而後期，這技術更演變成網頁上很強又很知名的技術：AJAX。相關文章在這裡。


----------------------Example-TestPhpTransParas-Main.php-----------------------------


<script language='JavaScript' type='text/JavaScript'>
isShowLabel = <?php echo $DB_Data ?>;
</script>





----------------------Example-TestPhpTransParas.js-----------------------------

$(document).ready(function ()
{
if ( 1 == isShowLabel )
{
$('.Lbl_PHP_Show').css("visibility", "visible");
}
});

----------------------Example-TestPhpTransParas.css-----------------------------
無需特別注意之處

Imgae這個TAG在IE8之前版本會有藍色框框的問題

好比底下的HTML

<a href="http://www.google.com/">
    <img src="/img/ball.png">
</a>

在IE8之前的版本（之後不確定）會因為圖片是可點的連結，所以會被藍色框框包起來。在Crome跟FireFox則不會。
為了避免藍色框框出現，可以這麼做
要在Style中（可能在CSS檔或同一檔案中）設定：


img
{
    border:hidden;
}

Html中，元件位置的控制，Position屬性

位置的控制，Position屬性有四個設定值，整理如下表：

position參數	absolute	relative	static(預設值)	fixed
中文意義	絕對位置	相對位置	靜態位置	固定位置
位置參考基準	父元素內容區邊界	在顯示流中相對其他元件的位置	不變	螢幕視窗最大可視範圍邊界（備註）
移動參考基準	文件	文件	文件	螢幕視窗最大可視範圍
可改變顯示位置	是	是	否	是
可調整大小	是	display為block：可display為inline：否	display為block：可display為inline：否	是
從顯示流中去除	是	否	否	是

一、什麼是fixed ? 最簡單的理解方式，就是很多大陸網站，會有廣告，會跟著你畫面，無論你滑鼠怎麼上下滾，廣告永遠出現在那個位置，那就是fixed的最直接示範。


二、什麼是跟absolute？跟fixed差不多，在畫面上元件都放在固定的位置，但會跟著捲軸的捲動，而跟著上下跑，這就是所謂的absolute。但是，你所設定的位置（left, top是根據你的父親容器來決定，不是螢幕範圍，而且，這個父親還必須具備「位置參數有設定為absolute或relative，如果父親容器沒有設定absolute或relative那就再看上一層父親元件，若沒有這種父親容器，則位置參考就會依據螢幕範圍。）


三、什麼是static？原本瀏覽器預設的就是static，就是按照原本的顯示流來排版，完全不能改變位置（下CSS指令無效）。


四、什麼是relate？比static略有彈性，就是在原本的顯示流上，然後作位置的調整，比方原本的位置流應該要讓元件B放在元件A下方位置，比方在x=20px, y=300px。而指定了left:30px, top:100px的話，就會讓位置出現在x=50px, y=400px了。

備註：


通常用fixed都會指定想放置的位置才對，但是如果你對某個元件沒有指定位置，他會依照顯示流中相對其他元件的位置來放置，但是，畫面捲動時又會固定住位置，不會隨著捲動，然後偶而又會被別的元件蓋住，行為難以理解。



顯示流說明參考：
http://my-web-design.blogspot.tw/2007/10/css-divposition.html



從10種位置範例設定來瞭解：
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Input元件的Width, Size, MaxLength, InputTyoe

文字輸入框在HTML中算是很常用的元件
這裡介紹一些簡單的屬性


<input maxlength="12" size ="12" type="password" value=""/>

其中的type，可以設定為text，可以設定為password，更可以設定為button，submit ........
今天針對text跟password來說明一下，也就是功能跟顯示上為文字輸入框

能輸入幾個文字，由maxlength來決定，而寬度，可以由size來決定，會根據font-size加上這裡的size屬性，決定出寬度，當然，你也可以不用這樣設定，而是在CSS當中直接設定width。

另外，當你設定為password來讓使用者輸入密碼的時候，預設會用「‧」來當成遮蔽字元，但是這個字元會根據不同的字型，在不同的瀏覽器可能會有大小差很多的情況，比方，用微軟粗黑體，那在Firefox底下看到的這個小圓點會變成大圓點。字型改為Arial則不會有這種情形了。

Html下拉選單ComboBox的Width不精準的問題

這是個目前沒有好解法的問題，這相信一般人碰到機會或許不到，因為現在大多數的人排版網頁應該會用相對位置，而非絕對位置，也不太會有老闆跟我老闆一樣，要你一個Pixel也不能歪掉的對齊。（拿尺在螢幕上量是家常便飯）不過既然發生了，我就記錄一下，以免後來忘記。


ComboBox下拉式選單在HTML4的語法是這樣

<select name="thelist" class="Language">
  <option>English</option>
  <option>繁體中文</option>
  <option>簡体中文</option>
</select> 

在HTML5的語法是這樣

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

而HTML5的作法相當彈性，如果按照這個初始值來設定，出來的下拉選單會非常的陽春，而且只是個DropDown元件，可編輯，外觀看起來又像是TextInput元件，所以我採用HTML4的作法。

而我做出這個元件之後，由於要對齊於背景圖，採用絕對位置，所以我需要在JavaScript去計算Left位置，所以我需要去透過JQuery去抓Language這個select元件的寬度，一抓，發現各家瀏覽器抓出來的數值差很大，Chrome跟IE比較接近，但稍有幾個Pixels的誤差，而Safari差的可多了，造成計算位置大錯誤。
解法：

我原本是不設定此物件的寬度，由文字個數跟Font-Size來決定寬度就好，而上述的抓寬度出來的數值錯誤，只好改為，我在CSS當中自己先設定了Width，（當然，這裡要實驗個幾次，在各瀏覽器確實都能正確顯示，這寬度才合適），然後在JavaScript就不用透過JQuery去抓寬度，而是直接用剛剛的固定寬度來計算就好，這樣才能得到正確的位置。