不同CSS布局实现与文字鼠标选择的可用性

一、文字选择的可用性

我们平时因为A原因或B原因，需要复制web页面上的文字内容。常见的操作就是按住鼠标，选中要复制的文字区域，抬起鼠标按键，目标区域的文字就选中了。

不知你知不知道，有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。

这么说吧，假设你在微博上看见一个名为“屌丝逆袭”的标题，但是，由于孤陋寡闻，不知道这个标题啥意思，于是想百度之，最快的方式就是选择→复制→搜索。结果，像中了邪，这几个文字TMD就是选不准，老把旁边的“萝莉御姐”一起选中了；然后，这个标题又是链接，不能双击选择！这么简单的一件事搞得这么折腾，想必哥你泡妹子的心情都没有了。

噢？你对这个假设表示怀疑。恩，看来我要拿点证据出来了。

正好我微博页面开着，几处点击找一找，啊，很快就有了。您可以试试微博右侧“换一换”几个文字，你能轻松选中吗？试试！

或是选中“设置分组”文字时，后面的些文字也莫名其妙一并带上了，为何呢？

二、幕后操手：CSS

我们都知道，同一种布局的效果实现可以很很多很多中不同的实现方式。而这些不同的CSS布局实现方式就会影响到文字鼠标选择的可用性问题。

举个对于页面重构人员很基本很简单的例子，我们要实现左标题，右描述的布局。类似下截图：

我们有一双手都数不过来的实现，但是，不同的实现，CSS消耗，扩展性，可维护性，以及可用性也是不一样的。这里，我们只讨论文字选择的可用性。

您可以狠狠地点击这里：CSS布局与文字的鼠标选择demo

进入demo，您会看到类似下图的效果：http://demo.Vevb.com/js/2012/css-layout-text-mouse/

虽然多个列表长相一样，但是却都是使用不同的方式实现的。您可以试着用鼠标选择各个列表左边标题文字以及右边的描述文字，就会看到，不同的CSS实现文字选择的范围，方向以及可选择性都是有差异的。