实际上这个小技巧提高的用户体验并不是很多,之所以值得一提是因为实在太简单了,只需要一句代码.
就好像有些工作虽然能提高用户体验不少但是成本太高不值得去做一样.讲究个"性价比"
这句代码很简单:
white-space: nowrap;
让文本强制不换行,尤其是一些自适应列表.这是我在看到yahoo的一个页面时发现问题的,当时那个页面出现了"湖南"(具体我不记得是哪个省了,且用湖南代替)湖在第一行最右边,南在第二行最左边.看起来有点让人不舒服,所以我意识到了这是个问题,我就想找找有没有简单的解决方法,问别人似乎没人觉得这是一个问题,也没人知道解决方法.我突然想到以前好像看过HTML有个强制不换行的功能,于是查了下手册一试,果然ok.所以现在我的浮动的自适应列表都用了这个属性.
当然如果仅仅是一句代码并不能算是小技巧,只能说是小方法.但是今天我突然想到,不仅仅是浮动的自适应列表,还有文本里出现的超连接,还有强调的文字都不应该换行,于是我又加上了这样一句代码
body a,strong{
white-space: nowrap;
}
我本来是写成
a,strong{
white-space: nowrap;
}
发现对链接不管用,应该是优先级不够,所以前面加了个标签,增加优先级.
strong标签 是起强调作用的.
这样在CSS里加上一个标签,就能让文本里哪些不知道什么时候会换行的重要的文字强制不换行了,虽然这并没有提高多少用户体验,但是成本太低了,没有任何道理不用.
注:上次转自己的,有人说讨厌那一挂版权信息——其实我是用来顺便骗外链的,哈哈,以后都不写了
本文来源于 久装鳖即成鳌
