一、文字選擇的可用性

我們平時因為A原因或B原因，需要復制web頁面上的文字內容。常見的操作就是按住鼠標，選中要復制的文字區域，抬起鼠標按鍵，目標區域的文字就選中了。

不知你知不知道，有些看山去OK的CSS布局實際影響了頁面上文字復制的可用性。

這么說吧，假設你在微博上看見一個名為“屌絲逆襲”的標題，但是，由于孤陋寡聞，不知道這個標題啥意思，于是想百度之，最快的方式就是選擇→復制→搜索。結果，像中了邪，這幾個文字TMD就是選不準，老把旁邊的“蘿莉御姐”一起選中了；然后，這個標題又是鏈接，不能雙擊選擇！這么簡單的一件事搞得這么折騰，想必哥你泡妹子的心情都沒有了。

噢？你對這個假設表示懷疑。恩，看來我要拿點證據出來了。

正好我微博頁面開著，幾處點擊找一找，啊，很快就有了。您可以試試微博右側“換一換”幾個文字，你能輕松選中嗎？試試！

或是選中“設置分組”文字時，后面的些文字也莫名其妙一并帶上了，為何呢？

二、幕后操手：CSS

我們都知道，同一種布局的效果實現可以很很多很多中不同的實現方式。而這些不同的CSS布局實現方式就會影響到文字鼠標選擇的可用性問題。

舉個對于頁面重構人員很基本很簡單的例子，我們要實現左標題，右描述的布局。類似下截圖：

我們有一雙手都數不過來的實現，但是，不同的實現，CSS消耗，擴展性，可維護性，以及可用性也是不一樣的。這里，我們只討論文字選擇的可用性。

您可以狠狠地點擊這里：CSS布局與文字的鼠標選擇demo

進入demo，您會看到類似下圖的效果：http://demo.Vevb.com/js/2012/css-layout-text-mouse/

雖然多個列表長相一樣，但是卻都是使用不同的方式實現的。您可以試著用鼠標選擇各個列表左邊標題文字以及右邊的描述文字，就會看到，不同的CSS實現文字選擇的范圍，方向以及可選擇性都是有差異的。