text-overflow

text-overflow:ellipsis 配合 overflow:hidden 可以用来实现字符串截断显示为更多的效果,而不用精确截字输出。

text-overflow 的基本单值用法就连 IE6 都支持,所以是可以放心使用的。

默认值是 clip,即简单地分割,可能会导致字符显示一半; 而 ellipsis 可以截字然后补上 ,效果更好。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css" media="screen">
    #inner{border:1px solid #ccc;}
    #inner p{width:200px; white-space:nowrap; overflow:hidden;}
    #inner p.t1{text-overflow:clip;}
    #inner p.t2{text-overflow:ellipsis;}
</style>

<div id="inner">
    <p class="t1">text-overflow:clip  more text here</p>
    <p class="t2">text-overflow:ellipsis more text here</p>
    <p class="t1">text-overflow:clip  中文测试跟多更多</p>
    <p class="t2">text-overflow:ellipsis 中文测试更多更多</p>
</div>

结果如下:

text-overflow:clip more text here

text-overflow:ellipsis more text here

text-overflow:clip 中文测试跟多更多

text-overflow:ellipsis 中文测试更多更多

ie6样式中多class的bug

IE6 有个多个 class 样式的 bug,具体表现为:当为一个元素连用 2 个及以上的 class 来匹配样式时(如:p.a.b),ie6 会识别为样式规则中最后一个 class 的定义(即:p.b)。

这样一来,不但多 class 的样式不正确,还可能会覆盖掉原对应 class 的样式(如 .b 的样式)。

下面截图最后一行有误,class 应为 “a c”

ie6 multiple class bug

上面截图最后一行有误,class 应为 “a c”

Demo 页面

JavaScript生成指定范围内的随机数

JavaScript 中,可以使用 Math.random() 来获得 [0, 1) 之间的随机数,但没有直接的获取一给定范围内的随机数,出于使用频率还算多,可以写成一个函数。

JavaScript 中,可以使用 Math.random() 来获得 [0, 1) 之间的随机数,但没有直接的获取一给定范围内的随机数,出于使用频率还算多,可以写成一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// mod from: http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html

function randomToN(maxVal, floatVal) {
    var randVal = Math.random() * maxVal;
    return typeof floatVal === 'undefined' ?
        Math.floor(randVal) : randVal.toFixed(floatVal);
}

function randomXToY(minVal, maxVal, floatVal) {
    var randVal = minVal + Math.random() * (maxVal - minVal);
    return typeof randVal === 'undefined' ?
        Math.floor(randVal) : randVal.toFixed(floatVal);
}

// example usages:
randomToN(50);           // => 35
randomToN(50, 3);        // => 37.748
randomXToY(30, 80);      // => 51
randomXToY(30, 80, 2);   // => 68.36