小居

月度归档： 2012 年 6 月

  • text-overflow

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

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

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

    <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) 之间的随机数，但没有直接的获取一给定范围内的随机数，出于使用频率还算多，可以写成一个函数。

    // 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